We would like to know how to fly in detailed information for image when hover.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
/*----------- grid ----------*/
.view {<!--from w w w .ja v a 2 s . co m-->
width: 399px;
height: 266px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
}
.view .mask, .view .content {
width: 399px;
height: 266px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
/*----------- photos ----------*/
.view img {
display: block;
position: relative;
width: 399px;
height: auto;
margin: 0 auto;
}
/*----------- Black bar text ----------*/
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 19px;
padding: 15px;
background: rgba(112, 112, 112, 0.7);
margin: 42px 0 0 0;
}
/*----------- button ----------*/
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #ff9900;
color: #fff;
text-transform: uppercase;
}
/* ------ !!!!!! effect !!!!!! ------ */
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
opacity: 0;
background-color: rgba(126, 138, 162, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity = 100);
opacity: 1;
}
.view-first:hover h2, .view-first:hover p, .view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity = 100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
div.view-first {
float: left;
margin: 4px;
}
div.view-first:nth-child(2n+0) {
clear: right;
}
</style>
</head>
<body>
<div id="content">
<div id="main">
<div class="view view-first">
<img src="http://placehold.it/399" />
<div class="mask">
<h2>Item 1</h2>
<br>
<p>this is a test.
this is a test. this is a test.
this is a test. this is a test.
this is a test. this is a test.
this is a test. this is a test.
this is a test. this is a test.
this is a test. </p>
<br> <a href="#" class="info">OK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The code above is rendered as follows: