JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div class="my_image" id="img_1">
    <img src="http://placehold.it/485x318" width="485" alt="image" />
    <cite class="cite_pad"><strong>Beautiful Pond:</strong> This was taken outside our tent. 3-15-09</cite>
</div>
<br />
<div class="my_image" id="img_2">
    <img src="http://placehold.it/485x318" width="485" alt="image" />
    <cite class="cite_pad"><strong>The Same Pond:</strong> Yes this is the same image. 3-15-09</cite>
</div>

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('http://www.thatgrafix.com/caption_bg.png'); _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;}

JavaScript

$(".my_image").hover(function(){
    
      // grab the div's id    
      var id = $(this).attr("id");
    
      // hide the caption    
      $("#"+id+" .cite_pad").hide();
    
      // over
      $("#"+id+" .cite_pad").slideDown("fast");
    },function(){
      //out
      var id = $(this).attr("id");
      $("#"+id+" .cite_pad").slideUp("fast");
    });