EN
CSS - change image size on hover
0 points
In this article, we would like to show you how to change the image size on hover event using CSS.
Quick solution:
xxxxxxxxxx
1
img {
2
width: 50%;
3
transition: 1s;
4
}
5
6
img:hover {
7
width: 60%;
8
}
The :hover
CSS pseudo-class is triggered when the user hovers over an element with the cursor (mouse pointer) changing the element style to the one specified within curly brackets.
In this example, we change the img
size on hover event with the following steps:
- in
img
style, we define the image size at the beginning -50%
. We also use thetransition
property to smoothly resize the image over1
second, - we use
img:hover
pseudo-class that actually changes thewidth
property on the hover event.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
body {
7
height: 200px;
8
}
9
10
img {
11
width: 50%;
12
transition: 1s;
13
}
14
15
img:hover {
16
width: 60%;
17
}
18
19
</style>
20
</head>
21
<body>
22
<img src="https://dirask.com/static/bucket/1624644642609-mbQLqBEYJX--example-img-730w.jpg" />
23
</body>
24
</html>