当前位置: 动力学知识库 > 问答 > 编程问答 >

html - 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="#">

<div>

<img src="http://placehold.it/500x500" class="img-responsive"/>

<div class="fa fa-plus project-overlay"></div>

</div>

<div style="text-align:center;">

<h3>Project name</h3>

<p>Image description</p>

</div>

</a>

</div>

</div>

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.

DEMO

网友答案:

When you specify position:absolute it positions itself to the next-highest element with position:relative. In this case, that's the .project div.

If you give the image's immediate parent div a style of position:relative, the overlay will key to that instead of the div which includes the text. For example: http://jsfiddle.net/7gYUU/1/

 <div class="parent">
    <img src="http://placehold.it/500x500" class="img-responsive"/>
    <div class="fa fa-plus project-overlay"></div>
 </div>

.parent {
   position: relative;
}
网友答案:

If i understand your question you want to have the overlay just over the image and not cover everything?

I'd set the parent DIV (i renamed in content in the jsfiddle) position to relative, as the overlay should be positioned relative to this div not the window.

.content
{
  position: relative;
}

I did some pocking around and updated your fiddle to just have the overlay sized to the img which (I think) is what you want, let me know anyway :) http://jsfiddle.net/b9Vyw/

网友答案:

I had a bit of trouble getting this to work as well. Using brouxhaha's answer got me 90% of the way to what I was looking for. But the padding adjust wouldn't allow me to put the text anywhere I wanted. Using top and left seemed to work better for my purposes.

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 80%;
    left: 20%;
}

http://jsfiddle.net/1rz0b7d8/1/

分享给朋友:
您可能感兴趣的文章:
随机阅读: