We would like to know how to hover to see the link with CSS3 Transitions: Fade In Element.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#fadeLink {<!-- ww w. java 2 s. c o m-->
opacity: 0;
visibility: hidden;
-webkit-transition: visibility 0.2s linear, opacity 0.2s linear;
-moz-transition: visibility 0.2s linear, opacity 0.2s linear;
-o-transition: visibility 0.2s linear, opacity 0.2s linear;
}
div:hover #fadeLink {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div
style="width: 100%; background: #ccc; padding: 2em 1em; text-align: center;">
Hover me to see the link<br>
<br>
<a href="#" id="fadeLink">This is a link</a>
</div>
</body>
</html>
The code above is rendered as follows: