Software 24 Hour .com

All Latest Software News Download And Working Tips Here All Free Internet Solution Here bloger tips

.

.

Tuesday 15 September 2015

Best Free jQuery CSS Image Hover Effect Demos & Plugins

Unknown 22:53 No comments :


jquery image hover effect

Today i am going to share  Free jQuery CSS Image Hover Effects with you that is pretty good.I came across quite a lot of CSS gallery websites that using huge thumbnail to showcase beautiful websites. Some of them are just ordinary thumbnail, but a lot of them have javascript animated caption to convey more information to viewers. In this tutorial, we will learn how to make ordinary thumbnail to something more. This is my second tutorial about thumbnail gallery, if you missed the first one, you might want to read it later -Downloading and demo links are given below. i also have given step by method of using this.

1. HTML

    

  1. <div class="zitem">
    2. 

  2.     <a href="#"><img src="1.jpg" alt="Test 1" title="" width="125" height="125"/></a>
    3. 

  3.     <div class="caption">
    4. 

  4.         <a href="">Test 1</a>
    5. 

  5. 

    6. 

  6.     </div>
    7. 

  7. </div>
    8. 

  8. 

    9. 

  9. <div class="zitem">
    10. 

  10.     <a href="#"><img src="2.gif" alt="Test 2" title="" width="125" height="125"/></a>
    11. 

  11.     <div class="caption">
    12. 

  12.         <a href="">Test 2</a>
    13. 

  13. 

    14. 

  14.     </div>
    15. 

  15. </div>
    16. 

  16. 

    17. 

  17. <div class="zitem">
    18. 

  18.     <a href="#"><img src="3.png" alt="Test 3" title="" width="125" height="125"/></a>
    19. 

  19.     <div class="caption">
    20. 

  20.         <a href="">Test 3</a>
    21. 

  21. 

    22. 

  22.     </div>
    23. 

  23. </div>
    24.

2. CSS

I have added inline comment in the following CSS code. If you want to learn more about CSS, read my previous post 15 CSS Tips and Tricks or, you want to know MORE ABOUT CSS, read my new post - 15 Ways to Optimize CSS and Reduce CSS File Size
    

  1. .zitem {
    2. 

  2.     width:125px;
    3. 

  3.     height:125px;    
    4. 

  4.     border:4px solid #222;    
    5. 

  5.     margin:5px 5px 5px 0;
    6. 

  6.     
    7. 

  7.     /* required to hide the image after resized */
    8. 

  8.     overflow:hidden;
    9. 

  9.     
    10. 

  10.     /* for child absolute position */
    11. 

  11.     position:relative;
    12. 

  12.     
    13. 

  13.     /* display div in line */
    14. 

  14.     float:left;
    15. 

  15. }
    16. 

  16. 

    17. 

  17. .zitem .caption {
    18. 

  18.     width:125px;
    19. 

  19.     height:30px;
    20. 

  20.     background:#000;
    21. 

  21.     color:#fff;
    22. 

  22.         
    23. 

  23.     /* fix it at the bottom */
    24. 

  24.     position:absolute;
    25. 

  25.     bottom:-1px; /* fix IE issue */
    26. 

  26.     left:0;
    27. 

  27. 

    28. 

  28.     /* hide it by default */
    29. 

  29.     display:none;
    30. 

  30. 

    31. 

  31.     /* opacity setting */
    32. 

  32.     filter:alpha(opacity=70);    /* ie  */
    33. 

  33.     -moz-opacity:0.7;    /* old mozilla browser like netscape  */
    34. 

  34.     -khtml-opacity: 0.7;    /* for really really old safari */  
    35. 

  35.     opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */
    36. 

  36. 

    37. 

  37. }
    38. 

  38. 

    39. 

  39. .zitem .caption a {
    40. 

  40.     text-decoration:none;
    41. 

  41.     color:#fff;
    42. 

  42.     font-size:12px;    
    43. 

  43.     
    44. 

  44.     /* add spacing and make the whole row clickable*/
    45. 

  45.     padding:5px;
    46. 

  46.     display:block;
    47. 

  47. }
    48. 

  48. 

    49. 

  49. img {
    50. 

  50.     border:0;
    51. 

  51.     
    52. 

  52.     /* allow javascript moves the img position*/
    53. 

  53.     position:absolute;
    54. 

  54. }
    55.

3. Javascript

This is a simple jQuery script with hover effect. What we have to do is calculate the width and height and set it to the image.
    

  1.     
    2. 

  2. $(document).ready(function() {
    3. 

  3. 

    4. 

  4.     //move the image in pixel
    5. 

  5.     var move = -15;
    6. 

  6.     
    7. 

  7.     //zoom percentage, 1.2 =120%
    8. 

  8.     var zoom = 1.2;
    9. 

  9. 

    10. 

  10.     //On mouse over those thumbnail
    11. 

  11.     $('.zitem').hover(function() {
    12. 

  12.         
    13. 

  13.         //Set the width and height according to the zoom percentage
    14. 

  14.         width = $('.zitem').width() * zoom;
    15. 

  15.         height = $('.zitem').height() * zoom;
    16. 

  16.         
    17. 

  17.         //Move and zoom the image
    18. 

  18.         $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
    19. 

  19.         
    20. 

  20.         //Display the caption
    21. 

  21.         $(this).find('div.caption').stop(false,true).fadeIn(200);
    22. 

  22.     },
    23. 

  23.     function() {
    24. 

  24.         //Reset the image
    25. 

  25.         $(this).find('img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100});    
    26. 

  26. 

    27. 

  27.         //Hide the caption
    28. 

  28.         $(this).find('div.caption').stop(false,true).fadeOut(200);
    29. 

  29.     });
    30. 

  30. 

    31. 

  31. });
    32.




No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )