We would like to know how to fade out when done with hover.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.block1 {<!-- w w w . j ava 2 s. co m-->
width: 320px;
height: 320px;
background-color: red;
}
.block1text {
width: 320px;
height: 320px;
font-family: Raleway;
font-weight: 700;
text-align: center;
font-size: 25pt;
color: #eee;
line-height: 320px;
letter-spacing: 2px;
position: absolute;
}
.block1>.overlay {
width: 320px;
height: 320px;
position: absolute;
-o-transition: .4s ease;
-ms-transition: .4s ease;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
transition: .4s;
}
.block1:hover>.overlay {
background-color: #000;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="block1">
<div class="overlay"></div>
<div class="block1text">hello</div>
</div>
</body>
</html>
The code above is rendered as follows: