I’m using jquery slide toggle to display a description over an image
there is a title div that is always visible at the bottom of the image, mouseover the title and a description will slide up, pushing the title up so it stay on top of the description div.
I have experimented with different positioning but cannot get it right, the description either slides down instead of up or the description slides up but doesn’t push the title up with it.
here is my code (i’ve removed the image)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="stylesheet" href="css/screen.css" type="text/css" /><script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.16.custom.min.js"></script><script> $(document).ready(function() { $(".box").hover(function() { $(".box_text").slideToggle(); $(this).css( 'cursor', 'pointer' ); }); });</script><style type="text/css">.box{ width:210px; position:absolute; background: rgb(0, 0, 0); height:200px;}
.box_title{ background: rgb(0, 149, 248); height:20px; position:absolute; bottom:0px;}
.box_text{ display:none; left:0px; bottom:0px; height:60px; background: rgb(0, 149, 248);}</style>
</head><body> <div class="box"> <div class="box_text"><p>Nulla facilisi. Aliquam mollis justo at elit mollis condimentum.</p></div> <div class="box_title">Title here</div> </div></body></html>