This is a really simple way of adding some animation to your image links, the overlays also work if Javascript is switched off, so you have a fallback in the css. The jQuery code is very minimal and uncomplicated. There will be some bits you’ll need to edit if you change the image size.

Demo of image tile links in jQuery

Download ZIP of all files (58Kb)


jQuery


$(document).ready(function(){
	$(".imagetile").mouseenter(function(){
		$(this).find("div").clearQueue().animate({top: -1},200);
	});
	$(".imagetile").mouseleave(function(){
		$(this).find("div").clearQueue().animate({top: 210},200);
	});
});

The code above goes through your page finding all elements with the class ‘imagetile’. If the mouse enters, it’ll animate the alternative text in, if you move the mouse out, it’ll animate to it’s original position. Note that if you change the image tile sizes you’ll need to edit the animation parameters.

HTML





Meerkat at Whipsnade Zoo


He was looking at the other meerkats. Comparing them maybe?

The ‘a’ tag is your actual link, and it works as a link. The image is actually the background of the ‘a’ tag, so you can either do it the way I did with a class defining the background image, or you can use a style attribute such as style=’background: url(images/meerkat.jpg)’ either is perfectly reasonable to do. However if you share tiles over pages, a class would be better if you need to change pictures. The title is in the ‘h2′ tag, and the extra test is in the ‘p’ tag. Under HTML5 this is all completely valid code.

CSS

.imagetile{
	width: 400px;
	height: 250px;
	display: block;
	position: relative;
	overflow: hidden;
	color: white;
	text-decoration: none;
}

.imagetile div{
	position: absolute;
	background-color: #333;
	background: url("images/background.png");
	display: block;
	border-top: 1px solid white;
	padding: 10px;
	height: 250px;
	width: 380px;
	top: 0px;
	left: 0px;
	top: 210px;
}

.imagetile h2{
	margin: 0px;
	padding: 0px;
	font-size: 18px;
}

/* image backgrounds */
.imagetile.tiger{
	background: url("images/tiger.jpg");
}
.imagetile.meerkat{
	background: url("images/meerkat.jpg");
}

This defines both the image tile, the caption and rollover styling. You need to have position: relative in .imagetile, and position: absolute in the imagetile ‘div’ as then the overlay will work. Overflow:hidden is used to hide anything that may go outside the boundaries of the imagetile box. We use a single 10×10 background PNG file to do the transparent colour, this is to make it compliant with IE7. In IE6 you’ll end up with a grey box instead of transparency, but it still works.

Demo of image tile links in jQuery

Download ZIP of all files (58Kb)