We would like to know how to hover to show image and background.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a {<!-- w w w . j ava2s .c o m-->
display: block;
width: 300px;
height: 150px;
-webkit-box-shadow: 1px 1px 2px #303030, -1px -1px 1px #2f2f2f;
-moz-box-shadow: 1px 1px 2px #303030, -1px -1px 1px #2f2f2f;
box-shadow: 1px 1px 2px #303030, -1px -1px 1px #2f2f2f;
}
div.hover-label {
opacity: 0;
}
a:hover {
-webkit-box-shadow: -1px -1px 2px #303030, 1px 1px 1px #3f3f3f;
-moz-box-shadow: -1px -1px 2px #303030, 1px 1px 1px #3f3f3f;
box-shadow: -1px -1px 2px #303030, 1px 1px 1px #3f3f3f;
}
a:hover+div.hover-label {
opacity: 1;
height: 150px;
position: absolute;
text-align: center;
width: 300px;
background: rgba(49, 49, 49, 0.3)
url(http://www.java2s.com/style/download.png) no-repeat scroll
center center;
-webkit-transition: height .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: height .2s ease-in-out, opacity .2s ease-in-out;
-o-transition: height .2s ease-in-out, opacity .2s ease-in-out;
transition: height .2s ease-in-out, opacity .2s ease-in-out;
}
</style>
</head>
<body>
<div class="thumbnail">
<a href="#">java2s.com</a>
<div class="hover-label"></div>
</div>
</body>
</html>
The code above is rendered as follows: