Rotate Image Animation on Hover with CSS & HTML

Rotate Image on Hover with CSS Animation Effect (180°)

by

In this tutorial, we will see how to rotate image on hover with an animation effect using CSS. What actually happens in this application is that, when we hover over any image, it turns 180 degrees on the right/left side. This won’t require any complex coding and can be achieved using simple CSS code.

Rotate Image on Hover – HTML/CSS

Let’s look at the code now. Starting with HTML code:

HTML

<h2>Hover to see the effect</h2>
<img src="http://codingiseasy.com/wp-content/uploads/2022/07/Image-Over-Text-with-Cloudinary-1.jpg"> 
<h5> Source code by CodingIsEasy.com</h5>

Once HTML is done, we will move onto the crucial part of the application, that’s CSS.

CSS

body {
 background: #000;
}

h2, h5 {
  color : white;
  text-align: center;
}

img {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  width: 250px;
  height: 150px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

img:hover {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

The transform property allows us to rotate, scale, move, and skew an element. The code is compatible for all browsers since we have provided the code for all popularly used browsers.

Demo

See the Pen Untitled by Arpit Mittal (@codingiseasy) on CodePen.

That’s it for this blog. Hope the tutorial was useful and informative.

Leave a Comment