CODEWITHSUNDEEP
jqueryhtmlcss
Abhishek Kumar
Abhishek Kumar

Reputation: 2276

Show images with effect on respective menu hover

How can I show an image with an effect when the cursor is hovering over a respective menus like this using jquery or css?

Can I do it just by css, or do I have to use jquery?

<html>
  <head>
     <title></title>    
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <script>
         $(document).ready(function(){
            $("#menu img" ).on( "click", function() {
                $("#menu img" ).hide( 1500 );
            });
         });
     </script>
  </head>
  <body>
     <button id="btn" type="button">Click Me!</button>
     <div id="menu">
         <ul>
             <li><a href="">Menu1<img src="images/1.jpg" /></a></li>                    
             <li><a href="">Menu2<img src="images/2.jpg"/></a></li> 
             <li><a href="">Menu3<img src="images/3.jpg"/></a></li>
         </ul>
     </div>
  </body>
</html>

Upvotes: 0

Views: 715

Answers (4)

Abhishek Kumar
Abhishek Kumar

Reputation: 2276

// Load this script once the document is ready $(document).ready(function () {

    // Get all the thumbnail
    $('menu li a').mouseenter(function(e) {

        // Calculate the position of the image image
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;

        // Set the z-index of the current item, 
        // make sure it's greater than the rest of thumbnail items
        // Set the position and display the image image
        $(this).css('z-index','15')
        .children("div.image")
        .css({'top': y + 10,'left': x + 20,'display':'block'});

    }).mousemove(function(e) {

        // Calculate the position of the image image            
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;

        // This line causes the image will follow the mouse pointer
        $(this).children("div.image").css({'top': y + 10,'left': x + 20});

    }).mouseleave(function() {

        // Reset the z-index and hide the image image 
        $(this).css('z-index','1')
        .children("div.image")
        .animate({"opacity": "hide"}, "fast");
    });

});

Upvotes: 0

electrikmilk
electrikmilk

Reputation: 1043

Use CSS transition:

#menu li img {
  -o-transition:color .2s ease-out, background 2s ease-in;
  -ms-transition:color .2s ease-out, background 2s ease-in;
  -moz-transition:color .2s ease-out, background 2s ease-in;
  -webkit-transition:color .2s ease-out, background 2s ease-in;
  /* ...and now for the proper property */
  transition:color .2s ease-out, background 2s ease-in;
background-image: url('path/to/my/image.png');
}
#menu li img:hover {
background-image: url('path/to/my/image.png');
}

Change the background-image or the background-position on :hover

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

/* Hide all images first, so that they don't appear until you hover */
$('#menu li img').hide();

$('#menu li').hover(function(){
   $(this).find('img').fadeIn('slow');
},function(){
   //do what you want when mouse out
});

.fadeIn()

Upvotes: 0

dialogik
dialogik

Reputation: 9552

You don't have to use JavaScript/jQuery to show an image on mouse hover. You can use plain CSS:

HTML

<ul id="menu">
    <li></li>
    ...
</ul>

CSS

#menu li:hover {
    background-image: url('path/to/my/image.png');
    background-position: 10px 10px /* set x and y coordinates */
}

But if you want to add an effect to the appearing of the image, you will have to use jQuery as drafted in Tushars answer.

(Actually, in CSS3 you can use animations as well; examples here. But be aware that this can cause cross browser and downward compatibility problems.)

Upvotes: 1

Related Questions