Jquery image overlay?

Question

I'm looking to overlay an image in the right hand corner on another image using jquery.

Basically I want the 2nd image to appear over the other image in the right hand corner when the user's mouse hovers above the image and then vanish when they stop hovering over it. How would I achieve this with Jquery?

Answer 1

@Senad is quite right, you don't need jQuery for that. However, if you have a more complicated situation and are looking for similar functionality, try:

Wrap them in a containing element. Set the containing element to position:relative Set the overlay image to position:absolute; top:0; left:0; and style the height and width as you like...then use jQuery to handle the hover event... HTML:

<div>
    <img id="main" src="myimg" />
    <img id="overlay" src="myimg"
    /></div>

CSS:

    div {
     position:relative;   
    }
    #main {   
        width:256px;
     div {
 position:relative;   
}

#main {   
    width:256px;
    height:256px;
}
#overlay {
 position:absolute;
  height:100px;
   width:100px;
   top:0;
   left:0; 
}

Code:

$(document).ready(function() {
    $("#main").mouseenter(function() {
               $("#overlay").show();
    });
    $("#main").mouseleave(function() {
               $("#overlay").hide();
    });
});

See a working example here: http://jsfiddle.net/jsney/10/

Answer 2

You don't need jQuery for that, you can use CSS for that, for example

<a href="#" class="my-overlay">My Overlay</a>

CSS

a.my-overlay {
background: url('/images/first-image.jpg') no-repeat; 
width: 100px;/*width: of image*/;
height: 100px;/*height of image*/;
display: block;
text-indent: -1000px;
overflow: hidden;
}
a.my-overlay:HOVER {background: url('/images/second-image.jpg') no-repeat; }

This is much easier solution and acceptable for everyone.