Zoom in on Hover with CSS

A lot of websites are using CSS to zoom in on hover for a cool effect these days. Here's how to do it. But first, an example, so you can see what we're talking about:

Penguin

The HTML is pretty easy. Just create a div or image and give it the class of "item" somewhere on your page. It'll need a wrapper div around it, in order to keep it from expanding on the zoom.

<div class="item-wrapper">
<div class="item penguin-example">
Penguin
</div>
</div>

You don't need the penguin-example class or the word "Penguin" – those were just included for this particular example.

Next, you'll want to add this CSS to your stylesheet:

.item-wrapper {
	overflow:hidden;
	width:111px;
	height:193px;
}
.item {
	width:111px;
	height:193px;

	-moz-transition: all 0.25s;
	-webkit-transition: all 0.25s;
	transition: all 0.25s;
}
.item:hover {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

The important thing to remember is that the size of .item and .item-wrapper must match, otherwise the div will change size on zoom.

You can speed up or slow down the zoom by adjusting the 0.25s. And you can change the amount of zoom by adjusting the 1.1. You'll note that both of those are there three different times for browser compatibility.


Comments

Loading…

This post was published on October 21st, 2016 by Robert James Reese in the following categories: CSS and HTML. Before using any of the code or other content in this post, you must read and agree to our terms of use.