How to rotate an image on mouse hover using CSS

Hey Folks, I am back with another tutorial of CSS. In this tutorial, we will learn how to rotate an image on mouse hover using CSS. So you must have encountered images or ads on a website that rotate as soon as you place your cursor on them.

We have used external stylings in our code. We have made separate files for both CSS and HTML. And we have linked them later using the link tag.

Code to rotate an image on mouse hover using CSS

ImageRotate.html file

<html>
<head>
  <title>Image Rotate</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <form id="form1">
  <center>
  <a href="" class="rotate-link">
    <img src="img3.jpg" class="rotate-icon">
  </a>
  </center>
  </form>
</body>
</html>

style.css file

.rotate-icon
{
  transition: transform 0.3s ease-out;
}
.rotate-link:hover .rotate-icon
{
  transform: rotate(360deg);
}

So we have used the link tag to link our CSS file to HTML file. Specifying form id is useful because it helps us apply different formatting effects in different forms. Centre tag is used to align our text and image to the center.

The img tag is used to display the image on our web page. The anchor tag is used to create a link on our web page. But between the anchor tag, we have placed an image tag. It creates a clickable image in place of text.

We have defined different classes for anchor and image tag. As we want both the tags to display different formatting effects. We have used the transition attribute to display an animation of 0.3 seconds.

.className is used to specifying animation effects of a particular tag and it is bound to tag having that class. And we have used hover because as soon we place our cursor image rotates at an angle of 360 degrees.

I hope you understand the code well. Feel free to ask your doubts in the comments section below.

You may also read,

Leave a Reply

Your email address will not be published. Required fields are marked *