Today, we will see how to create a zoom effect on image, with CSS. Today we have many useful tools to perform zooming effects on images, however the following approach could be of some use in specific situation where not complicated solutions are required.
The effect is simple, however, starting from this example, we can eventually develop a more complex one, for example using absolute positioning.
Said that, let's see how to do it.
The HTML
We are going to use two images: one is the small version and the second is the large one. When the user puts the cursor on the small one, the large one will appear. Very simple, isn't it?
<a href="#" class="zoom">
<img src="images/small.jpg">
<span><img src="images/large.jpg"></span>
</a>
The CSS
In the CSS rules, we need to temporary hide the large image and then create a hover rule to make it visible.
a.zoom span
{
position: absolute;
visibility: hidden;
}
a.zoom
{
position: relative;
z-index: 0;
}
a.zoom:hover
{
z-index: 1;
}
a.zoom:hover span
{
visibility: visible;
top: 10;
left: 70px;
}
As you can see the large image has an absolute position. We can change the top and left values in order to make it visible in a particular section of your viewport.Piece of cake!
Both images are loaded by the browser.
ReplyDeleteIt's possible to remove the smaller image and only use the large version to avoid an extra image download.
Simply scale the large version down to the size required.
The only consequence of this is that the scaled down image may look a little strange because it's the browser doing the resize.
<'a href="#" class="zoom">
<'img src="images/large.jpg" width="50" height="40" />
<'span><'img src="images/large.jpg" /><'/span>
<'/a>
Ben,
Deletethat is correct. The main problem with my solution is that the two images are loaded (as you point out). In your solution, only the large image is loaded, so we are downloading less. The problem could be in the scaling process, as you say.
In just a few days I will publish a list of possible jQuery plug-in for image zoom (the post is scheduled for the 2nd of March). Those solutions are more "complicated", but more efficient, for sure.
Thanks for sharing your ideas!
Hello!
ReplyDeleteIs there a code to change the hover with on mouse click? I would like to zoom in and out on mouse click.
Thanks
Yeah, sure you can. You have to use JavaScript for that, or maybe a jQuery plugin.
Deleteyes i know that, but i rather use your CSS code moderated to "onclick" if its possible. But i can't find the right command. Your CSS code works fine and its simple to use.
DeleteTry this solution: Bon rouge
DeleteWhat right in # <href
DeleteWhat?
Delete"I was looking for looking for a:active The :active pseudoclass defines the state where the mouse button is held down while over the element you're targeting. "
ReplyDeleteI had found it on some forum. I newer heard of it.
I hope it will help someone too. Its perfect for gallerys.