Effect How to - Hover span to show image

Question

We would like to know how to hover span to show image.

Answer


<html>
<head>
<style>
#gif {<!--from w ww  .  j a v a 2 s  . c  o  m-->
    position: absolute;
    left: 50px;
    top: 120px;
    display: none;
}
#trigger:hover + #gif {
    display: block;
}

</style>
</head>
<body>
    <p>Hover <span id="trigger">here</span>
    <span id="gif"><img src="http://www.java2s.com/style/download.png" /></span>
    </p>
</body>
</html>

The code above is rendered as follows: