It’s Trendy! How to Make a Zoom Hover Button for the Web Without JavaScript

A “zoom hover button” is a trendy web ui element which features an image that “zooms in” when the mouse hovers over it. While it’s completely useless on a mobile page, the zoom hover button is still a really cool effect for mouse-and-computer users visiting your page.

Here’s an example (mouse over to view effect):

 

Want to make one of your own? Here’s a look at how to do it!

First, you’ll need to create a div tag in your HTML document like so:

<div class='zoombtn' id='scarveron'></div>

The class will help us control the zoom features and the id, as you’ll see, will only tell us what the background image will be.

Now, go over to your CSS document and set up the styling for your class. To start, we’re only doing this:

.zoombtn{
width: 200px;
height: 200px;
display: block;
background: black;
}

This should produce a big, black box on your page where the button should be:

Now, using your id, let’s put in a background image. The background image you are using MUST be at least twice the size of the button. In this case, the height and width of the image I’m using is 400px by 400px. I’ve chosen to Photoshop an image from my favorite comic, Scarlet Veronica. You can use whatever you like.

#scarveron{
background-image: url("http://www.archcitystudio.com/images/scarveronbtn.jpg")
}

Your picture won’t fit quite right, so we need to adjust our zoombtn CSS:

.zoombtn{
width: 200px;
height: 200px;
display: block;
//background: black;
background-size: cover;
background-position: center center;
}


Now we’ve got:

But the hover isn’t working yet, so just a little more CSS:

.zoombtn{
width: 200px;
height: 200px;
display: block;
//background: black;
background-size: cover;
background-position: center center;
}

.zoombtn:hover {
animation-name: zoomin; // the name of the animation you will be using
animation-duration: .5s; // how long the animation takes to take place
background-size: 400px auto; // this reflects the size of the background image *after* the animation
}

@keyframes zoomin {
from {background-size: 200px auto;}
to {background-size: 400px auto;}
}

And you should be all set! For extra styling effects, maybe add a box-shadow or border.

Questions or comments? Hit up that comment box below! Thanks and see you soon!

Leave a Reply