Image padding test

by sambaldwin

HTML

<div class="item">
    <img src="http://lorempixel.com/300/200/transport" />
    <div class="overlay">
        	<h2 class="overlay-title">Project title</h2>
    </div>
</div><!-- 
--><div class="item">
    <img src="http://lorempixel.com/300/200/city" />
    <div class="overlay">
        <h2 class="overlay-title">Project title</h2>
    </div>
</div><!-- 
--><div class="item">
    <img src="http://lorempixel.com/300/200/people" />
    <div class="overlay">
        	<h2 class="overlay-title">Project title</h2>
    </div>
</div><!-- 
--><div class="item">
    <div class="parent">
    <img src="http://lorempixel.com/300/200/cats" />
    <div class="overlay">
        <h2 class="overlay-title">Project title</h2>
    </div>
</div> 
</div>

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding:0;
}
.item {
    display:inline-block;
    padding:0 1em;
    position:relative;
    margin:0 0 2em 0;
    width:33.333%;
}
.item img {
    max-width:100%;
    margin:0;
    padding:0;
    border:0;
}
.overlay {
    background:rgba(255, 255, 255, 0.75);
    padding:0;
    display:block;
    position:absolute;
    top:0;
    left:0.5em;
    height:100%;
    width:100%;
}

.parent {
    position:relative;
    width:100%;
    height:100%;
}

body {
    font-size:100%;
    font-weight:400;
    background:#ddd;
}
h2 {
    font-size:100%;
    font-weight:400;
}
a:link, a:hover, a:visited, a:active {
    color:#000;
    text-decoration:none;
}