Mouse over the hidden picture display text

Mouse over the hidden picture display text


Mouse over the hidden picture display the text
Demonstration

JavaScript Code
  1. <script>
  2. $(document).ready(function() {
  3. //if mouse over and mouse out
  4. $('.eff').hover(
  5. function () {
  6. value = $(this).find('img').outerHeight() * -1;
  7. //for left/right if you have different width and height,
  8. //commented out because we are using up/down in this example
  9. //value = $(this).find('img').outerWidth() * -1);
  10. //animate the image
  11. // you can change the sliding direction by changing bottom to left, right or top
  12. // if you changed this, you will have to change the position of the hover out as well
  13. $(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'});
  14. },
  15. function () {
  16. //reset the image
  17. // the position property (bottom), it must be same with the on in the mouseover
  18. $(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'});
  19. });
  20. //if user clicked on the thumbnail
  21. $('.eff').click(function () {
  22. //grab and execute the first link in the thumbnail
  23. window.location = $(this).find('a:first').attr('href');
  24. });
  25. });
  26. </script>


XML/HTML Code
  1. <div class="eff">
  2. <img src="1.gif" alt="Test 1" title="" width="126" height="126" />
  3. <div class="caption"><a href=" " class="header">www.freejs.net</a></div>
  4. </div>
  5. <div class="eff">
  6. <img src="2.gif" alt="Test 1" title="" width="126" height="126" />
  7. <div class="caption"><a href=" " class="header">Umbrella</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>
  8. </div>
  9. <div class="eff">
  10. <img src="3.gif" alt="Test 1" title="" width="126" height="126" />
  11. <div class="caption"><a href=" " class="header">Maximum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>
  12. </div>
  13. <div class="clear"></div>



The original address

Posted by Edwin at December 18, 2013 - 11:33 PM