Overlap an img completely with another div

Question

I am trying to achieve this effect where a photo gets a repeating pattern overlayed over the entire photo when the user place his mouse over the photo.

Problem: I do not seem to be able to make the overlay div overlay the photo completely. How should this be done?

JSfiddle: http://jsfiddle.net/KDyKH/2/

Edit: Updated the fiddle

CSS

#container {
    position: relative;
    padding: 10px;
    width: 1000px;
    height: 500px;
    background: blue;
}

.photo_box {
    padding: 8px 10px 11px 10px;
    background: #fff;
    -webkit-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    1px 1px 6px rgba(50, 50, 50, 0.25);
    box-shadow:         1px 1px 6px rgba(50, 50, 50, 0.25);
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: inline-block;
    position: relative;
}

.photo {
    position: absolute;
    z-index: 0;
    margin-bottom: 13px;
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.photo_tint {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background: red;
    -moz-opacity: 0.70;
    opacity: 0.70;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
}

HTML

<div id="container">
    <div class="photo_box">
        <img src='http://www.kurzweilai.net/images/Google-logo.jpg' class="photo">
            <div class="photo_tint"></div>
        </img>
    </div>
</div>

score 1 · Answer 1 · answered Jun 23 '12 at 22:34

1

.photo_tint {
    position: absolute;
    z-index: 100;
    background: red;
    top:0; left:0;
    width:100%; height:100%;
}

???

http://jsfiddle.net/tFbbM/1/

answered Jun 23 '12 at 22:34

owenmelbz

6,180
16
63
113

Oh, I dont want to cover the white part, just the image. I tried changing the top and left, but it suddenly jumped if top is not 0. In addition, the red overlay is as wide as the white box, I just need it to be as wide as the photo. http://jsfiddle.net/KDyKH/6/ – Nyxynyx Jun 23 '12 at 23:01

score 1 · Accepted Answer · edited May 23 '17 at 12:04

In addition to adding left and top properties to .photo_tint, you also need to make .photo_box relatively positioned (it wasn't before you edited your question).

.photo_box {
    position: relative;
}

.photo_tint {
    left:0;
    right:0;
}

http://jsfiddle.net/KDyKH/5/

The absolute position's left/top/right/bottom attributes work off the last element higher in the hierarchy with position set to relative or absolute. If no parent elements have position set to relative/absolute, the body is used. In your case, the closest relatively positioned element was #container, so when left and top were set on .photo_tint it used #container's origin and not .photo_box's origin as needed to achieve the desired effect.

Additionally, if an element is set to position:absolute, and no left/top/right/right properties are set, the element will not behave as absolute (see this question).

Graham.Fraser · Answer 3 · 2012-06-23T22:45:11.207

0

z-index:-1 on the image or z-index:2 on the div

#container {
    position: relative;
    width: 500px;
    height: 500px;
    background: blue;
}

.photo {
    position: relative;
    width: 300px;
    height: 100px;
    background: green;
}

.photo_tint {
    position: absolute;
    z-index: 1;
    background: red;
    width: 300px;
    height: 100px;
    top:0px;
}

edited Jun 23 '12 at 22:45

answered Jun 23 '12 at 22:37

Graham.Fraser

369
2
12

score 0 · Answer 4 · answered Jun 23 '12 at 22:42

0

Just position the photo_tint div using top and left. http://jsfiddle.net/OhMrBigshot/gEdJu/

answered Jun 23 '12 at 22:42

casraf

21,085
9
56
91

I updated my jsfiddle to more accurately reflect the scenario http://jsfiddle.net/KDyKH/2/ – Nyxynyx Jun 23 '12 at 22:55

Overlap an img completely with another div

4 Answers4