EN
CSS - expand div on hover
3
points
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:
- in
divstyle, we define the element size at the beginning. We also use thetransitionproperty to smoothly resize thedivover1second, - we use
div:hoverpseudo-class that actually changes theheightandwidthproperties 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>