Return to Snippet

Revision: 12089
at March 1, 2009 23:57 by jadedbat

Initial Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" xml:lang="en" lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Page Title</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function() {
	  // grab the div's id	
	  var id = $(this).attr("id");
	  // hide the caption	
	  $("#"+id+" .cite_pad").hide();
	  // over
	  $("#"+id+" .cite_pad").slideDown("fast");
	  var id = $(this).attr("id");
	  $("#"+id+" .cite_pad").slideUp("fast");
<style type="text/css">

.my_image {position:relative; width:484px; height:318px; background:#eee; border:solid 1px #ccc; margin:0px auto; padding:15px;}
cite {height:25px; background:url(''); _background:#000; position:absolute; top:15px; left:15px; width:475px; font-family:verdana; font-style:normal; font-size:85%; color:#fff;}
.cite_pad {padding:5px; display:none;}


<!-- items to edit: css: my_image width & height to match image size, the width for cite (to fit inside image) and increment div id's img_1, img_2, and finally the width of the image -->
<div class="my_image" id="img_1">
	<img src="" width="485" alt="image" />
	<cite class="cite_pad"><strong>Beautiful Pond:</strong> This was taken outside our tent. 3-15-09</cite>
<br />
<div class="my_image" id="img_2">
	<img src="" width="485" alt="image" />
	<cite class="cite_pad"><strong>The Same Pond:</strong> Yes this is the same image. 3-15-09</cite>


Initial URL

Initial Description
[Video Example](

A cross browser image caption on mouseover.  Using jquery, CSS.  This is a bit crude but pretty simple to implement.  Just change the image width, some css to match that image size and create dynamic id's for the divs holding the images for jQuery.  Used cite for captions. This validates too :) [Video Example](

Initial Title
jQuery, CSS Image Rollover Captions - validates + video example + cross browser

Initial Tags
css, image, jquery

Initial Language