15 Amazing css image hover effects zoom, Rotate, Slide.

15 Amazing CSS Image Hover Effects Zoom, Rotate, Slide.

CSS Image Hover Effects Zoom, Rotate, Slide.

HTML and CSS are the two languages that are used to create a webpage. HTML is a markup language that provides structure to a webpage, while CSS is a style sheet language that defines the colors, fonts, and other design elements of a page.

Being a web developer it’s very important to learn new styling so that you can use it in your projects and CSS image shower effects are one of them.

CSS Image Hover Effects are a great way to add some flair to your website. They come in multiple shapes and sizes and can be used to create some really cool effects.

These effects are created by adding CSS code to the images on your website. This code tells the browser how it should behave when you hover over an image with your mouse cursor.

There are three different types of hover effects that you can choose from Rotate, Slide, Zoom, Blur, GrayScale, and many more. The type of effect you use will depend on what type of effect you want for your website.

In this section, we will learn how to create 15 different CSS shower effects zoom, Rotate, Slide, Blur, GrayScale with HTML and CSS.

Before that, you can also check out the Rainbow Border button with HTML and CSS.

Here are a couple of related posts you may find helpful, too:

  1. How to make money through coding? 9 Easy Ways To Make Money.
  2. 15+FREE Stuff For College Students Using Your College ID.
  3. how to get rich by coding? I make $100 every month from coding

15 Amazing 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.

<figure>
  <img src="image.jpg">
</figure>
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;
}

6. Rotate (+ Zoom Out)

Rotate is another effect that can be used in place of zoom. When you use rotate, the image rotates in place in order to give it a more dynamic feel.

Here’s the code and the  rotation angle can be changed to any movement by changing the value and rotate the magnification value. scale

figure img {
  -webkit-transform: rotate(15deg) scale(1.4);
  transform: rotate(15deg) scale(1.4);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}

7. Blur

When you hover over an element, it will blur its background color and make it transparent to give a sense of depth.

Here’s the CSS code and if you want to adjust the blur effect, change the value specified in the code below to any value.blur(3px).

figure img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: blur(0);
  filter: blur(0);
}

8. Gray Scale

When you hover over a layer, its background color will turn into black and white (grayscale).

Basically, It’s a cool grayscale hover effect that can apply to any image or client’s logo list without writing any JavaScript.

Here’s the CSS code:

figure img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

9. Sepia

Sepia changes the color of an image to brown-ish gray when hovered over.

Sepia is a reddish-brown color, named after the rich brown pigment derived from the ink sac of the common cuttlefish Sepia.

Here’s the CSS code:

figure img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

10. Blur + Gray Scale

This is a combination of the Blur and Gray Scale introduced above, and CSS is described as follows in the implementation.

This is one of the interesting hover effects to show the grayscale with blur on hover the image with the help of the simple css3 code.

Here’s the CSS code:

figure img {
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: grayscale(100%) blur(3px);
  filter: grayscale(100%) blur(3px);
}

11. Opacity # 1

When you hover over an element, its background color will become more transparent and gradually fade out until you move your cursor away from it.

CSS3’s opacity property makes it easy to change the opacity of images, text, <div>s, and other elements.

Here’s the CSS code:

figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  opacity: .5;
}

12. Opacity # 2

opacityAs before, it was made transparent by using when hovering, figurebut you can make it look a little different just by specifying the background color for the parent element of the image (in this sample).

Here’s the CSS code:

figure {
  background: #1abc9c;
}
figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  opacity: .5;
}

13. Flashing

Flashing changes the color of an image to red or orange when hovered over.

The below example shows the CSS image hover effects zoom, flash animation effect, here is the full css code and also provided a live demo for your better understanding.

Write CSS in the implementation as follows.

figure:hover img {
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}
@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}

14. Shine

When you hover over a layer, its text color will turn into white and the text will be highlighted with a yellow glow like shine on metal.

To be honest, there seems to be a smarter and more versatile description method, but it has an effect that makes the light flow from left to right when hovering.
Write CSS in the implementation as follows.

Here’s the CSS code:

figure {
  position: relative;
}
figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
figure:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

15. Circle

A ripple effect like that used in Google’s Material Design is added when hovering.
Write CSS in the implementation as follows.

This is one of the interesting hover effects to show the circle on hover the image with the help of the simple css3 code.

Write CSS in the implementation as follows.

figure {
  position: relative;
}
figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: '';
  width: 0;
  height: 0;
  background: rgba(255,255,255,.2);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}
figure:hover::before {
  -webkit-animation: circle .75s;
  animation: circle .75s;
}
@-webkit-keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
@keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

Conclusion

CSS3 has a lot of new features that are supported by all browsers. The css image hover effects zoom work. The css image hover effects zoom, Rotate, Slide work.hover effect is one of them. It changes the background or the text color to show that the user is hovering over it.

CSS image hover effects zoom, Rotate, Slide work are an important part of any website. They are used to create a more interactive experience for the user. The hover effect that is used most often is the Blur, opacity, grayscale, Shine, Flashing, Sepia effect.

I hope this blog helps you and how these css image hover effects zoom, Rotate, Slide work.

If you find it helpful then please share it with your friend and colleagues and show some support. Let me know if you have any doubts please comment down.

To contact me here’s my Instagram link: untied_blog

Read more

  1. how to get rich by coding? I make $100 every month from coding
  2. How To Create An App Without Coding| Build an App In 5 Minutes
  3. 11 Amazing ReactJS Projects Ideas For Beginners with Source Code
  4. How To Answer “Tell Me About Yourself”| Interview Questions.
  5. How To Answer “Strengths And Weaknesses” (Interview Questions)
  6. “Why Should We Hire You” 7+ Best Answers Examples

Leave a Comment