<!DOCTYPE html>
<html>
<head>
<style>
.fade
{
width:500px;
height:300px;
position:absolute;
left:50%; margin-left: -250px; /* center */
top:50%; margin-top: -150px;
background:#333;
font-family:Arial;
font-weight:900;
font-size:48px;
line-height:300px;
text-align:center;
transition:all 0.3s;
/* opacity:0.4; can change this too */
color:#AAA;
}
.fade:hover
{
background:#DDD;
cursor:pointer;
/* opacity:1; change to this */
color:#000;
border-radius:300px;
}
</style>
</head>
<body>
<div class="fade">Fade in</div>
</body>
</html>