Tech Support Guy banner
Status
Not open for further replies.
1 - 9 of 9 Posts

·
Registered
Joined
·
392 Posts
Hi

Does anyone know how to create a "zoom in" effect on an image when you hover over the image? By zoom in, I mean the original image gets smaller when you mouse over the image.

Any suggestions?
To get this zoom in effect, I would first create a jpeg of the image you want b4 the mouse goes over it, and then a .gif animation of the picture zooming in.

You can create the gif animation in photoshop. Here is a tutorial.

Using CSS, use the following code:

.picture1 {
background-image:url('your_jpeg_image.jpg');
width: 130px;
height: 40px;
}

.picture1:hover {
background-image:url('your_gif_animation.gif');
}

Now the above code is presuming you know how to do stylesheets. If you don't, I would recommend you to learn it.

There is also another option, which is by using Flash. Create the zoom animation, and then place it in a button symbol inside the "over" section. Heres a great tutorial!
 

·
Registered
Joined
·
592 Posts
Discussion Starter · #3 ·
Thanks for the information, but can you do it with jquery or any other languages? The main purpose is to let users to see the transition effect from larger image to a smaller image when hover with mouse. I'm trying to get away from flash.
 
1 - 9 of 9 Posts
Status
Not open for further replies.
Top