Float button over image

Topic: Float button over image

ales pro asked 8 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:

How do I do that? Thanks! Aleš

Add comment

Marta Szymanska staff pro premium answered 8 years ago

0 0 Best answer

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

Add comment

ales pro answered 8 years ago

0 0 Best answer

Perfect! It might seem easy to you, but for backend programmers like myself, frameworks are a lifesaver. Thanks, Marta. Aleš

Add comment

Marta Szymanska staff pro premium answered 8 years ago