Zoom Images on Mouse Hover Using CSS Only

I love it when I visit a site and every time I click on an image, it enlarges automatically. It's one of the essential web designs to make websites more alive. It's especially important if there are crucial information in that image that you want the readers to read, so they can easily zoom in on the texts. I've googled tricks to do it and most, if not all, involve a little bit of javascript in action.

I'll show you that it's possible to make an interactive image using CSS only. So, if you're just starting out your web development journey and you have yet to dip your foot into the Javascript pool, you can definitely follow my method with ease.

Here's an example, go hover on the image :D.

That thing can be achieved by just a few lines in your CSS file.
Let's dissect the code one by one

The HTML
I wrap the image in a flex container, just because it's flexbox and flexbox makes life easy. Everyone says thank you Flexbox! :)

<div class="container">
<img id="Family-Guy" 
src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/2019-08/Untitled%20design%20-%202019-08-23T235151.866.webp" alt="Family Guy">
</div>

The CSS
Now, we want the zoom to take effect when we hover our cursor on the image. So, make sure you define the :hover pseudo class on the img tag.

And here's where it gets interesting, add animation attribute to your :hover pseudo class. Yep! The CSS animation takes css to the next level as it lets you animate literal static properties and transition them from one CSS style to another, gradually and smoothly.

Here's what you need to do first with the CSS.

body {
  width: 100%;
}

.container {
  display: flex;
  justify-content: center;
  margin: 20px;
}

#Family-Guy {
  border-radius: 10px;
  cursor: pointer;  
  width: 300px;
}

#Family-Guy:hover {
  animation-name: on-hover;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}

@keyframes on-hover {
  0% {
    height: auto;
    opacity: 0.7;
  }
 100% {
    width: 600px;
    height: auto;
  }
}

First, define the animation-name as it will later be called by the keyframes. Then, define how long the zoom in will take effect in seconds.

Lastly, specify how you want the animation style to apply. The animation-fill-mode property determines what happens before the animation begins and after the animation ends. If you leave this out, the value is set to none by default.

Of course, we use forwards for this case. Because we want the image to stay zoomed in UNTIL the cursor no longer hovers on it. With forwards, the last animation style (defined in the keyframes property) will be retained afterwards. Here are other possible values for the animation-fill-mode property:

none This is the default value and no animation style will be applied.

backwards The animation will go back to its initial style set in the keyframe after the whole styles have been applied. So, if we apply this value in the CSS above, the image will go back to its initial width after being zoomed, even when the cursor is still hovering on it.

both This will apply the animation styles before and after the animation starts.

The real magic actually happens because of the keyframes property here. This is where we define what CSS styles will be applied, how and when the styles should transition.

The code to specify can be in percent, as used above or with keywords from and to, which is similar to percent. Using percent is recommended for the best browser compatibility though!

In the example above, the 0% represents the initial state of the image, where nothing happens except I decrease the opacity. Nothing fancy...

Then, at 100%, I define the width to be 600px, which is twice the size of the initial image size. There's no limit on how many keyframes property you use in one animation. But this is a simple example in the hopes you can understand it easily.

So, there you go folk! Simple but powerful enough to make your website slightly interactive. Hope this helps. Ciao kakao!