Padding on image overlay CSS

Question

I want to create an overlay on a image but it needs to have a 20px inset. The only problem is I'm using width: 100% and height: 100% on the overlay so a 20px padding wasn't working. The thing I tried next was the following:

<div class="projectwrapper">
<div class="projectOverlayInset">
    <div class="projectOverlay"></div>
</div>
    <img class="projectImage" src="http://upload.wikimedia.org/wikipedia/commons/6/66/Tower_Bridge_opening_at_night_for_a_ferry.jpg" style="display:block" />
</div>

And the CSS:

.projectwrapper {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}

.projectwrapper img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

img {
max-width: 100%;
margin-left: auto;
margin-right: auto;
border: 0;
}

.projectOverlay {
position: absolute;
z-index: 20;
width: 100%;
height:100%;
top:0;
left:0;
background-color: rgba(0,0,0,0.6);
box-sizing: border-box;
}

.projectOverlayInset {
box-sizing: border-box;
padding: 20px;
}

JSFIDDLE

But I just can't get it to work. Even not with the box-sizing trick.

I think this is a really easy question haha.

Thanks in Advance.

Greets,

Wouter

Answer 1

You can change the absolute positioning to the container projectOverlayInset from the overlay, the padding doesn't work for you because the overlay was out of the flow with the absolute :

 .projectwrapper { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } .projectwrapper img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } img { max-width: 100%; margin-left: auto; margin-right: auto; border: 0; } .projectOverlay { height: 100%; background-color: rgba(255, 0, 0, 0.6); box-sizing: border-box; } .projectOverlayInset { position: absolute; z-index: 20; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box; padding: 20px; } 

 <div class="projectwrapper"> <div class="projectOverlayInset"> <div class="projectOverlay"></div> </div> <img class="projectImage" src="http://upload.wikimedia.org/wikipedia/commons/6/66/Tower_Bridge_opening_at_night_for_a_ferry.jpg" style="display:block" /> </div> 

Answer 2

If I understand the requirement correctly, you do not need the inset div at all.

The overlay can be positioned and the dimensions adjusted using calc :_

 .projectwrapper { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } .projectwrapper img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } img { max-width: 100%; margin-left: auto; margin-right: auto; border: 0; } .projectOverlay { position: absolute; z-index: 20; width: calc(100% - 40px); height: calc(100% - 40px); top: 20px; left: 20px; background-color: rgba(255, 0, 0, 0.6); box-sizing: border-box; } 

 <div class="projectwrapper"> <div class="projectOverlay"></div> <img class="projectImage" src="http://upload.wikimedia.org/wikipedia/commons/6/66/Tower_Bridge_opening_at_night_for_a_ferry.jpg" style="display:block" /> </div>