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:
img {
width: 50%;
transition: 1s;
}
img:hover {
width: 60%;
}
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.
Practical example
In this example, we change the img size on hover event with the following steps:
- in
imgstyle, we define the image size at the beginning -50%. We also use thetransitionproperty to smoothly resize the image over1second, - we use
img:hoverpseudo-class that actually changes thewidthproperty on the hover event.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
height: 200px;
}
img {
width: 50%;
transition: 1s;
}
img:hover {
width: 60%;
}
</style>
</head>
<body>
<img src="https://dirask.com/static/bucket/1624644642609-mbQLqBEYJX--example-img-730w.jpg" />
</body>
</html>