Codesnipp.it Social Code Sharing

adam turner

animate opacity of image caption

by adam turner on Sep 07, 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.fade').hover(function() { $(this).stop().animate({"opacity": 1}); },function() { $(this).stop().animate({"opacity": .5}); }); }); </script> </head> <body> `<!--start image with caption-->` <div class="image" style="width:255px;height:188px;background:url(images/image.jpg) no-repeat 0 0;"></div> <div class="fade" style="background:#01ADEF;width:255px;height:58px;position:absolute;top:138px;left:5px;z-index:2;">text</div> `<!--end image with caption-->` </body> </html>

Can't see the comments? Please login first :)