Image rollover test

by sambaldwin

HTML

<div class="item">
    <img src="http://placehold.it/300x200" /> <a href="#">
		<div class="overlay">
			<h2 class="overlay-title">Project title</h2>
		    </div>
	</a>

</div>
<div class="item">
    <img src="http://placehold.it/300x400" />
    <a href="http://www.google.com"><div class="overlay"><h2 class="overlay-title">Project title</h2>
    </div></a>
</div>
<div class="item">
    <img src="http://placehold.it/300x200" /> <a href="#">
		<div class="overlay">
			<h2 class="overlay-title">Project title</h2>
		    </div>
	</a>

</div>

CSS

* {
   margin:0;
    padding:0;
    -webkit-box-sizing: border-box;
}

.item {
    display:inline-block;
    margin:0 1em 1em 0;
    position:relative;
}

.overlay {
    background:#fff;
    padding:1em;
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/*.over {
    cursor:pointer
}*/

html {
    font-size:16px;
}

body, h2 {
    font-family: "Helvetica Neue", sans-serif;
    font-size:100%;
    font-weight:400;
}

a:link,
a:hover,
a:visited,
a:active {
    color:#000;
    text-decoration:none;
}

JavaScript

$(function () {
    $(".item").hover(function () {
            $(".overlay", this).fadeTo(200, 0.85);
        }, function() {
            $(".overlay", this).fadeOut(200);}
                     );
    });