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/300x200" /> 
    
		<div class="overlay">
			<h2 class="overlay-title">Project title</h2>
		    </div>
	
</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

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

.overlay {
    background:rgba(255,255,155, 1);
    padding:0.5em;
    display:none;
    position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

JavaScript

var speed = 200;
$(function () {
    $(".item").each(function () {
        var a = this;
        var b = $(this).attr("id").replace("thumb", "link");
        $(this).hover(function () {
            $("#" + b).addClass("over");
            $(this).children(".overlay").fadeIn(speed).addClass("over")
        }, function () {
            $("#" + b).removeClass("over");
            $(this).children(".overlay").fadeOut(speed).removeClass("over")
        }).click(function () {
            location = $(this).find("a").attr("href")
        });
        $("#" + b).hover(function () {
            $(a).children(".overlay").fadeIn(speed).addClass("over")
        }, function () {
            $(a).children(".overlay").fadeOut(speed).removeClass("over")
        })
    });