Cool Image Hover Enlarge Effect

With this tutorial you can add nice mouse over image enlarge effect to any site within minutes. All you need is to include the jQuery primary file as well as a few lines of your own code that we will discuss below.

The first thing before starting this job would be to create 2 versions of an image. For this example we will create a small one that is 100px width by 100px height and a large image that is 300px width by 300px height. We will also want to setup a blank html page and insert the following code.

<a href=”image_large.jpg” class=”hover”><img src=”image_small.jpg” /></a>

What we did above is setup a basic link with the class of hover containing an image. In the href of the link we put the large version of the image while in the src of the image we use the small version. Save the page and you should see the image appear in the browser. If you click on the image you will notice that it takes you directly to the large image.

*Note: Don’t worry about the clicking into the large image. We will end up disabling the click later on with jQuery.

Now that we have the HTML portion of our script ready we need to include the jQuery file. For this tutorial I will link directly to the file using the Google Libraries API. If you want you can just download the jQuery file directly from the jQuery website and include it in your page.

In the head of your document you should have the following code:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>

Now that we included this file we will need to create our own script that will handle the image hovering. We will start with the document ready function which will allow our jQuery script to execute.

<script type=”text/javascript”>
$(function(){
// code goes here
}}
</script>

After setting up the document ready function we need to use a selector for the link that will do something when we hover over it. We will do this by referencing the .hover class we created earlier. This script will go within the document ready function in order to run.

$(‘a.hover’).hover(function(){
// Code for MouseOver
}, function(){
// Code for MouseOut
});

The code above selects the links that have a class of hover. Using the .hover method in jQuery will allows you to easily handle when a user moves his mouse over the image link and off of it.

var offsetX = 20;
var offsetY = 10;
$(‘a.hover’).hover(function(e){
var imglink = $(this).attr(‘href’);
$(‘<img id=”largeImage” src=”’ + imglink + ‘” />’).css({‘top’:  e.pageY + offsetY, ‘left’: e.pageX + offsetX}).appendTo(‘body’);
}, function(){
$(‘#largeImage’).remove();
});

In the above code we did a lot, but let me explain. First we created 2 variables offsetX and offsetY. We stored 2 values that would be used later to define how far from the mouse the large image would display when hovered over. Within the .hover method for jQuery we pass though the e parameter so that we can access the positioning of the mouse to help us position the image when hovering over.

You’ll notice that I created another variable within the first function for imglink. This variable will store the href which contains the large image we created. The next line simply uses the selector to create an object on the fly. You will see that we are creating an image and passing through to the src the imglink variable that we created. We also appended the .css method in order to determine the positioning of the image. We use the current position of the mouse in addition with the offsets that we set.

Once we create the basic positioning styles we then append it to the body so that we can see the new object.

In the second function that we passed through the .hover method we simply remove the image that we created that had an id of largeImage. This second function will be processed when a user hovers off the image.

Simple enough so far, but we’re not done yet. We need to create the css styles that will make this work as well as add some pizzazz. The code is as follows:

<style type=”text/css”>
#largeImage {
position: absolute;
padding: 8px;
background-color: #e3e3e3;
border: 1px solid #bfbfbf;
}
</style>

That’s it for the CSS. Simple enough and you can add more styles to give even more style to your effect. So now that we have this in place try it out and see it in action. You will see the large image display and remove when you hover over the smaller version of the image. But one thing, what if we want the larger image to follow the mouse when hovering on top of the smaller image. For this we need to use the .mousemove method as follows.

$(‘a.hover’).mousemove(function(e){
$(‘#largeImage’).css({‘top’:  e.pageY + offsetY, ‘left’: e.pageX + offsetX});
});

Notice we used the same css styling for the .mousemove as we did on the .hover event. Works the exact same way, just that the .mousemove method allows the browser to determine the positioning on the movement of the mouse.

One more thing we want to do is disable the clicking of the link. We do that by using the .click method in jQuery.

$(‘a.hover’).click(function(e){
e.preventDefault();
});

And that’s it. We use the method .preventDefault in conjunction with the e parameter we passed through. This will tell the browser to disable any action that would normally occur when that link a.hover is clicked.

Now if you save your document you will have a nice image hovering effect that you can easily apply to any of your projects. Let me know what you guys think and if you have any questions.

Download Image Hovering Effect

Post By: Frank Perez | Add to favorites