Zooming hover effect CSS3

I’m sure that you’ve all seen the hover effects where the whole section either slightly zooms in our out.

I figured that this would be a nice simple introductory tutorial.

View Demo

Firtly, I like to start off by setting out the HTML structure.

<a href="#">
 <div class="hover">
 <img src="https://images.unsplash.com/photo-1470138831303-3e77dd49163e?auto=format&fit=crop&w=2850&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="Unsplash.com">
 <h1>Slighly scaled down</h1>
 <h2>Lorem ipsum</h2>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</p>
 <div class="info">
 More Info
 </div>
 </div>
</a>
<a href="#">
 <div class="hover up">
 <img src="https://images.unsplash.com/photo-1429552054921-018e433d7d34?auto=format&fit=crop&w=2710&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="Unsplash.com">
 <h1>Slighly scaled up</h1>
 <h2>Lorem ipsum</h2>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</p>
 <div class="info">
 More Info
 </div>
 </div>
</a>

Once I’ve set this out we then dive into the CSS now this is where the magic happens. The main call to action is the transform function. In this example I’ve used the -webkit- version, for other browser usage see here.

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');

body{ font-size: 1rem; font-family: 'Open Sans'; background: #f4f4f4; margin: 2rem; }

.hover { float: left; width: 40%; color: #222; padding: 1.75rem 2%; background: #fff; box-shadow: 2px 20px 50px rgba(0,0,0,0.3); border-radius: 5px; margin-bottom: 2rem; margin-right: 1.75rem; -webkit-transition: 0.3s linear; }

.hover:hover { -webkit-transform: scale(0.96); }

.up:hover { -webkit-transform: scale(1.04); }

.hover img { width: 100%; float: left; margin-bottom: 1.5rem; box-shadow: 1px 10px 25px rgba(0,0,0,0.2); border-radius: 5px; }

.hover h1 { font-size: 1.7rem; line-height: 1.9rem; margin-bottom: 0rem; font-weight: 600; }

.hover h2 { font-size: 1.2rem; font-weight: 400; color: #0099ff; }

.hover p { font-size: 1rem; line-height: 1.8rem; font-weight: 300; }

.hover .info { float: left; width: 80%; padding: 0.8rem 10%; background: #0099ff; text-align: center; color: #fff; font-size: 0.75rem; text-transform: uppercase; font-weight: 600; border-radius: 5px; box-shadow: 3px 7px 20px rgba(0,0,0,0.2); }

As you can see we start off by just setting the basic information (font faces and the body), this is all personal preference. Then we go into creating the way the link section will look, I’ve gone for a 3D paper style in this demo.

Once this is all set all we have to do is simply apply the transform function to the boxes and apply a scale, it’s up to you whether you scale up or down.

Finally we add a transition, this is just so that the hover runs smoothly without a random jump (I recommend a linear transform for the smoothest look).

The final result should look like the below:

See the Pen Simple scaling hover effect by Rob Salaman (@lanesalaman) on CodePen.