EN
CSS - add shadow on hover
0 points
In this article, we would like to show you how to add shadow on hover event using CSS.
Quick solution:
xxxxxxxxxx1
div:hover {2
box-shadow: 10px 5px 10px gray;3
}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.
In this example, we add shadow to the div element with the following steps:
- in
divstyle, we specify the div style at the beginning and use thetransitionproperty to smoothly add shadow to thedivover1second, - we use
div:hoverpseudo-class withbox-shadowproperty inside that actually adds a shadow to thedivelement on the hover event.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
height: 100px;8
width: 100px;9
background-color: deepskyblue;10
transition: 1s;11
}12
13
div:hover {14
box-shadow: 10px 5px 10px gray;15
}16
17
</style>18
</head>19
<body>20
<div></div>21
</body>22
</html>