CODEWITHSUNDEEP
htmlcss
Joseph Zammit
Joseph Zammit

Reputation: 373

Overlay on image issue

Need some help with an image overlay. I made a jsfiddle http://jsfiddle.net/7upzLdee/1/

<div class="rss-output" style="float:">
<div class="body"> 
<div class="overlay-feed"></div>
<div class="imagefix" style="float:none;">
<a target="_blank" href="#">
<img  src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
</div>
</div>
</div>

div.rss-output {
float: left;
width: 33.333%;
position: relative;
padding: 15px !important;
overflow: hidden;
}

.rss-output .body {
width: 100%;
}

.rss-output .overlay-feed {
background: #000 none repeat scroll 0% 0%;
z-index: 1;
position: absolute;
width: 100%;
height: 200px;
opacity: 0.5;
}

div.imagefix {
height: 200px;
line-height: 250px;
overflow: hidden;
text-align: center;
width: 100%;
}

div.imagefix img {
margin: -50%;
}

I cannot figure out why the overlay is going over the image on the right side. I've tried many things but no luck.

All help appreciated.

Thanks in advance

Upvotes: 3

Views: 92

Answers (3)

sonam gupta
sonam gupta

Reputation: 785

The problem is with overlay width.

.rss-output .overlay-feed {
    background: #000 none repeat scroll 0% 0%;
    z-index: 1;
    position: absolute;
    width: 89%;
    height: 200px;
    opacity: 0.5;
}

do overlay width 89%.fiddle

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 4503

add position: relative for .rss-output .body 

div.rss-output {
    float: left;
    width: 33.333%;
    position: relative;
    padding: 15px !important;
    overflow: hidden;
}

.rss-output .body {
    width: 100%;
    position: relative;
}

.rss-output .overlay-feed {
    background: #000 none repeat scroll 0% 0%;
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 200px;
    opacity: 0.5;
}

div.imagefix {
    height: 200px;
    line-height: 250px;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

div.imagefix img {
    margin: -50%;
}
<div class="rss-output" style="float:">
<div class="body"> 
    <div class="overlay-feed"></div>
    <div class="imagefix" style="float:none;">
        <a target="_blank" href="#">
            <img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
    </div>
    </div>
</div>

Upvotes: 2

Pepo_rasta
Pepo_rasta

Reputation: 2900

added position:relative; to body, because, when you use position:absolute; on some element, it will ignore static parents and therefore its width

div.rss-output {
    float: left;
    width: 33.333%;
    position: relative;
    padding: 15px !important;
    overflow: hidden;
}

.rss-output .body {
    width: 100%;
    position:relative;
}

.rss-output .overlay-feed {
    background: #000 none repeat scroll 0% 0%;
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 200px;
    opacity: 0.5;
}

div.imagefix {
    height: 200px;
    line-height: 250px;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

div.imagefix img {
    margin: -50%;
}
<div class="rss-output" style="float:">
<div class="body"> 
    <div class="overlay-feed"></div>
    <div class="imagefix" style="float:none;">
        <a target="_blank" href="#">
            <img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
    </div>
    </div>
</div>

Upvotes: 0

Related Questions