CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
carl saptarshi
carl saptarshi

Reputation: 355

Adding overlay to Bootstrap Thumbnail Image on hover within a well

I have a bootstrap well. Within the well I have a thumbnail image. What I am trying to do is whenever i hover over the image, I want there to be a black overlay on-top of the image e.g. rgba(0,0,0,0.5). Currently, this is what I have:

.

You can see the actual code and current output on my Codepen (it is a little lengthy) : click here for what I currently have

As you can see from the Pen, when I hover over the image, the overlay occurs, but below the actual image, rather than on the image. Ideally I want this to sit in such a way that when i resize my screen e.g. for mobile phones, the overlay should stay in proportion with the image. I tried with media queries but that was a very poor idea. How can I cause the overlay to sit on-top of the image which in turn would get rid of the excess space at bottom of the well?

Upvotes: 1

Views: 643

Answers (1)

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34160

To do this you can set display of its parent to relative and add both image and the overlay with position absolute and top and left 0; set the overlay opacity to 0 and on mouse over set it to .5

    .parent{
    position:relative;
    width:100px;
    height:100px;
    }

.parent img, .parent .overlay{
position:absolute;
left:0;
top:0;
width:100px;
height:100px;
}

.parent .overlay{opacity:0;}
.parent .overlay:hover{opacity:.5;}

And the html would be:

<div class="parent">
    <img src="image.png" />
    <div class="overlay">
</div>

But I recommand another solution that you just give its parent black background and on hover set the opacoty of image to .5:

.parent{backgound:#000;}
.parent img:hover{opacity:.5}

And the html:

<div class="parent">
    <img src="image.png" />
</div>

Upvotes: 1

Related Questions