ales pro asked 7 years ago


Hello, Is it just me or are there no examples of a Float Button over <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: FB Update Cover Photo How do I do that? Thanks! Aleš

Marta Wierzbicka staff answered 7 years ago


Hi, I'm glad to help you. Best, Marta

ales pro answered 7 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 7 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

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No