Zoom Images on Mouse Hover Using CSS Only
Tags: css, html, beginners, webdev
Published: 2022-07-13 10:10:07

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.
{% codepen https://codepen.io/koselige/pen/PoRGaXN %}

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! :)

```html
<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.

```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!