[Edit]

CSS - change image size on hover

1 contributors

2 contributions

0 discussions

0 points

Created by:

Eshaal-Wilkinson

774

In this article, we would like to show you how to change the image size on hover event using CSS.

Quick solution:

xxxxxxxxxx
 
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

Edit

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 the transition property to smoothly resize the image over 1 second,
we use img:hover pseudo-class that actually changes the width property on the hover event.

xxxxxxxxxx
 
<!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>