Log In | Register | January 23, 2019

Share
 

jQuery Programming - September 4, 2010

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: | FavoriteLoadingAdd to favorites

22 Comments

Private Krankenversicherung Vergleich
Friday, October 1, 2010

You made a few good points there. I did a search on the topic and almost not got any specific details on other sites, but then great to be here, really, thanks.

- Lucas

Wahab
Friday, November 26, 2010

hello
I want this script to work on the following page.

http://www.royalsbarbq.dk/menu/hove.html

Those small Danish flag images are actually images of the food, when user moves mouse on the image it enlarges.
How can i do that.
Please help me. :(

Thanks
Wahab

DMF
Wednesday, March 23, 2011

Hello, this is really nice. How do I control where the large image hovers? For example, it hovers to the right and below the mouse pointer.

What if I want it to hover to the left and above the mouse pointer?

Also, how would you keep it visible in the browser. I noticed if it low on the page, it displays mostly out of site.

Thanks much for this clarification!

Frank Perez
Monday, March 28, 2011

You would need to do a few things in order to accomplish what you want. First off the part that controls the positioning of the hover is
$(‘’).css({‘top’: e.pageY + offsetY, ‘left’: e.pageX + offsetX}).appendTo(‘body’);. You could just simply use negative values to invert the hover.

In order to solve your second issue, you would need to use an if check to make sure the position of the hovered object is not outsize the width of the body of the browser. If it is outside of the width of the browser window you would simply invert it.

CSweet
Saturday, April 2, 2011

This works perfectly with your images, but when I plug in my own images it will load the images but hovering does nothing.

I renamed my images “large_image.jpg” and “small_image.jpg” and the hover behavior did not replicate.

I have a feeling it has to do with the respective sizes of my images.

My large image has a pixel width of 1000 while my small image has a pixel width of 500.

I can’t figure out where in the code to account for this.

Any help would be much appreciated…thanks for this free service.

Chris

jamsheed
Wednesday, May 18, 2011

Excellent article…I used this in my current project..Thank you very much..

smiindia
Tuesday, September 6, 2011

super java script thanks for this script

Chris
Saturday, October 15, 2011

Thanks for this. I’m going to use it on my site. I’d like to a text description below the enlarged image … any suggestions?

Sapna
Friday, January 6, 2012

thanks a lot…it was really helpful for me as i am a beginner…

Florin
Tuesday, January 10, 2012

Hi!
Thank you for sharing this! The effect is really nice!

Since I am not very familiar with css and jscript programming , I would like to be able to keep your hover effect and in addition to open a page in a new tab by clicking the small image!

Maybe this can be easily accomplished by adding parametres in href but I did not manage to do it till now!

Your help would be much appreciated!

Mike
Monday, March 26, 2012

Hi.
Thanks for the code. I have implemented it and it works well, but I am struggling to change the position of the large image which appears always to the bottom right of the mouse. I’ve tried to set negative values (as per above post) but as I’m not really a programmer I’m not quite sure I’ve set them in the right place.

Ideally I’d like the large image to pop up centred over the smaller one.

Thanks if you can help.

Mike.

mace
Thursday, April 19, 2012

Can it be done on images in wordpress?

sharvesh
Thursday, May 17, 2012

Hi,
Simple tutorial ..
really helpful .
but i’m wondering is it possible to move the popup higher when lower img hovered and pop down when above img displayed,i’m creating a grid of imgs.

Dhruv Malik
Friday, June 29, 2012

Your code was really helpful. I have a small image and a large image but I want to add a link on the small image to a webpage, can you help me figure out where should I add the link of the webpage?

Isaac
Thursday, October 11, 2012

I believe what you published made a ton of sense.
But, what about this? suppose you typed a catchier title?
I ain’t suggesting your content is not solid, but what if you added something to maybe grab a person’s
attention? I mean Cool Image Hover Enlarge Effect | DevBlog.

co is kinda vanilla. You should glance at Yahoo’s home page and note how they create post titles to grab viewers interested. You might try adding a video or a related picture or two to grab people interested about everything’ve got to say.
In my opinion, it might make your website a little livelier.

Reece
Thursday, November 29, 2012

naturally like your web-site but you need to check
the spelling on several of your posts. A number of them are rife with spelling
problems and I find it very troublesome to inform the reality
however I will definitely come again again.

Josh
Friday, December 21, 2012

Post writing is also a excitement, if you know then you
can write or else it is difficult to write.

0 Comments
Wednesday, May 1, 2013

Really no matter if someone doesn’t know afterward its up to other people that they will help, so here it occurs.

mehr lesen/anzeigen
Wednesday, July 23, 2014

My spouse and I stumbled over here by a different page and thought
I may as well check things out. I like what I see so i am just following you.

Look forward to looking at your web page for a second time.

dsfsdf
Monday, October 6, 2014

dfrgdgdfgdfgdfg

dsfsdf
Monday, October 6, 2014

it is realy help ful for me

andre
Monday, June 15, 2015

This was exactly what I needed.
Thanks.

Leave a Comment



Need Help? Ask a Question

Ask anything you want from how to questions to debug. We're here to help.

You Must Be Logged In To Post A Question.

Log In or Register