Animation How to - Hover to Fade in/out element

Question

We would like to know how to hover to Fade in/out element.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.container {<!--from  ww  w.ja v  a  2 s  .c  o m-->
  position: relative;
}
.container>.show-on-hover {
  opacity: 0.0;
  position: absolute;
}
.container:hover>.show-on-hover {
  opacity: 1.0;
}
.show-on-hover {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
}
.container {
  margin: 20px;
}
#divId {
  left: 0;
  top: 20px;
}
</style>
</head>
<body>
  <div class="container">
    <a id="hlDiv" href="...">link text</a>
    <div class="show-on-hover" id="divId">popup stuff</div>
  </div>
</body>
</html>

The code above is rendered as follows: