Languages
[Edit]
EN

CSS - expand div on hover

0 points
Created by:
Violetd
415

In this article, we would like to show you how to expand div on hover event using CSS.

Quick solution:

div {
  height: 100px;
  width: 100px;
}

div:hover {
  height: 150px;
  width: 150px;
}

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.

 

Practical example

In this example, we change the div element size on hover event with the following steps:

  1. in div style, we define the element size at the beginning. We also use the transition property to smoothly resize the div over 1 second,
  2. we use div:hover pseudo-class that actually changes the height  and width properties on the hover event.
// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    body {
      height: 150px;
    }

    div {
	  height: 100px;
      width: 100px;
      background-color: deepskyblue;
      transition: 1s;
    }

    div:hover {
      height: 150px;
      width: 150px;
    }

  </style>
</head>
<body>
  <div></div>
</body>
</html>

References

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join