CSS Image Hover Effects Zoom, Rotate, Slide.

Common HTML/CSS

Basically, some HTML and CSS code are actually the same for every hover effect such as width, height, margin, padding, etc. that’s why I am writing here you can add to your hover effect.

//HTML
<figure>
  <img src="image.jpg">
</figure>

//CSS
figure {
  width: 300px;
  height: 200px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

1. Zoom In # 1

CSS image hover effects zoom is a type of effect that enlarges the image when the user hovers over it.

This is a great way to show off high-resolution images on your site, and it also adds an element of surprise when the user hovers over an image for the first time.

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

2. Zoom In # 2

Basically, this CSS image hover effects zoom is exactly the same which we have discussed above.

The zoom effect will create a magnifying glass that zooms into the image when hovered over. In this hover effect, you just have to change the width of an image and it will look different.

figure img {
  width: 300px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  width: 350px;
}

3. Zoom Out # 1

This CSS image hover effects is exactly reversible of the effects which we have discussed above( Zoom In # 1).

As you can see in the image effect that zooms out the image by reducing the value.

figure img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: scale(1);
  transform: scale(1);
}

4. Zoom Out # 2

This CSS image hover effects is exactly reversible of the effects which we have discussed above( Zoom In #2).

This type of effect is mostly used in portfolio sites. It is useful in situations where we want to show the user details on the image.

Here’s the CSS code:

figure img {
  width: 400px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  width: 300px;
}

5. Slide

The slide effect will show a slideshow of all the images in order when hovered over and back to normal when not hovered over.

If the width of the image to be used is larger than “the area you want to display + the distance you want to slide”, you scaledo not need to specify it in the sample code.

Here’s the CSS code:
figure img {
margin-left: 30px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
margin-left: 0;
}
https://untiedblogs.com/15-amazing-css-image-hover-effects-zoom/