Topic: Float button over image
ales
pro
asked 6 years ago
Hello,
Is it just me or are there no examples of a Float Button over
How do I do that? Thanks!
Aleš
<img />
or any other <element> in your documentation? What I would like to achieve is something like FB Update Cover Photo effect.
Here is an example:

Add comment
ales
pro
answered 6 years ago
Perfect! It might seem easy to you, but for backend programmers like myself, frameworks are a lifesaver.
Thanks, Marta.
Aleš
Marta Wierzbicka
staff
answered 6 years ago
Hello,
You mean sth like this? Take a look:
CSS:
#example{
background-repeat: repeat-x;
margin-left: 20px;
margin-top: 13px;
}
#example .but1{
line-height: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right:0px;
display:inline-block;
position:relative;
}
#example .but1 a {
position:absolute;
top: 5px;
left: 5px;
}
HTML:
<div class="container pt-6">
<div class="row">
<div class="col-md-6">
<div id="example">
<div class="but1">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<a class="btn-floating btn-large red"><i class="fa fa-bolt"></i></a>
</div>
</div>
</div>
</div>
</div>
Best,
Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No