RGilkes RGilkes - 4 months ago 36x
HTML Question

Image overlay on responsive sized images bootstrap

I am trying to create a responsive grid of images (with descriptions) that when moused over will have a color overlay (just the image and not the text). Because of the responsive heights of the images, I am having an issue where the overlay covers everything and not just the image.

Any way I can fix this?

I've recreated the issue here for easier understanding: http://jsfiddle.net/r8rFc/

Here is my HTML:

<div class="row">

<div class="col-xs-12 col-sm-6 col-md-3 project">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive"/>
<div class="fa fa-plus project-overlay"></div>
<div style="text-align:center;">
<h3>Project name</h3>
<p>Image description</p>


And my CSS:

.project-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(41,128,185,0.9);
color: #fff;
padding: 50%;

Thanks in advance!


Add a class to the containing div, then set the following css on it:

.img-overlay {
    position: relative;
    max-width: 500px; //whatever your max-width should be 

position: relative is required on a parent element of children with position: absolute for the children to be positioned in relation to that parent.