EN
CSS - rotate image on hover
0 points
In this article, we would like to show you how to rotate image on hover event using CSS.
Quick solution:
xxxxxxxxxx
1
img {
2
transition: 1s;
3
}
4
5
img:hover {
6
transform: rotate(360deg);
7
}
The :hover
CSS pseudo-class is triggered when the user hovers over an element with the cursor, changing the element style to the one specified within curly brackets.
In this example, we rotate the img
element with the following steps:
- in
img
style, we specify the image style at the beginning and use thetransition
property to smoothly rotate theimg
over2
seconds, - we use
img:hover
pseudo-class withtransform
property inside that actually rotates theimg
element on the hover event.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
body {
7
height: 200px;
8
}
9
10
img {
11
height: 100px;
12
margin: 30px;
13
transition: 2s;
14
}
15
16
img:hover {
17
transform: rotate(360deg);
18
}
19
20
</style>
21
</head>
22
<body>
23
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
24
</body>
25
</html>