Showing posts with label jcaption. Show all posts
Showing posts with label jcaption. Show all posts

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>