Mick Redman: jcaption

Tuesday, 17 August 2010

jQuery Image Overlay

I've been looking for a nice, simple image overlay. One which wouldn't make me create unnecessary code around my images. I found this one called jcaption. It's a very simple implementation, so I thought I'd share it with you.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image overlay</title>
<style type="text/css">
html
{
font-family:Sans-serif;
}
.caption
{
position: relative;
}
.caption p
{
position: absolute;
bottom:0;
left:0;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="scripts/jcaption.min.js"></script>
<script>
$(function()
{
$('img').jcaption({
animate: true, show: {height: "show"},hide: {height: "hide"}
});
});
</script>
</head>
<body>
<div class="caption">
<img src="http://farm5.static.flickr.com/4092/4954283598_7e64000a5c_m.jpg" alt="purpleRingSmall" />
</div>
</body>
</html>