Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
.container {
width: 960px;
margin: 0 auto;
position: relative;
}
a {
color: #eee;
}
.id1 {
top: 0;
left: 50px;
}
.id1 .img {
background: url("http://devanswer.com/codes/files/thumbnail1.jpg") left top no-repeat;
}
.item.id1 {
width: 100px;
height: 100px;
}
.id2 {
top: 180px;
left: 200px;
}
.id2 .img {
background: url("http://devanswer.com/codes/files/thumbnail1.jpg") left top no-repeat;
}
.item.id2 {
width: 200px;
height: 200px;
}
.id3 {
top: 500px;
left: 100px;
}
.id3 .img {
background: url("http://devanswer.com/codes/files/thumbnail2.jpg") left top no-repeat;
}
.item.id3 {
width: 150px;
height: 150px;
}
.id4 {
top: 20px;
left: 700px;
}
.id4 .img {
background: url("http://devanswer.com/codes/files/thumbnail3.png") left top no-repeat;
}
.item.id4 {
width: 150px;
height: 150px;
}
.id5 {
top: 470px;
left: 600px;
}
.id5 .img {
background: url("http://devanswer.com/codes/files/thumbnail4.jpg") left top no-repeat;
}
.item.id5 {
width: 110px;
height: 110px;
}
.id6 {
top: 50px;
left: 400px;
}
.id6 .img {
background: url("http://devanswer.com/codes/files/thumbnail5.jpg") left top no-repeat;
}
.item.id6 {
width: 130px;
height: 130px;
}
.id7 {
top: 250px;
left: 550px;
}
.id7 .img {
background: url("http://devanswer.com/codes/files/thumbnail6.png") left top no-repeat;
}
.item.id7 {
width: 120px;
height: 120px;
}
.id1, .id2, .id3, .id4, .id5, .id6, .id7 {
width: 400px;
height: 300px;
}
.item.id1:hover, .item.id2:hover, .item.id3:hover, .item.id4:hover, .item.id5:hover, .item.id6:hover, .item.id7:hover {
width: 400px;
height: 300px;
}
.item {
position: absolute;
width: 100px;
height: 100px;
/*overflow: hidden;*/
/*
linear: the transition will have constant speed from start to end.
ease: the transition will start slowly, then get faster, before ending slowly.
ease-in: the transition will start slowly.
ease-out: the transition will end slowly.
ease-in-out: the transition starts and ends slowly.
cubic-bezier: define specific values for your own transition.
*/
-webkit-transition: all 500ms ease-in-out;
/** Chrome & Safari **/
-moz-transition: all 500ms ease-in-out;
/** Firefox **/
-o-transition: all 500ms ease-in-out;
/** Opera **/
-ms-transition: all 500ms ease-in-out;
/** IE **/
transition: all 500ms ease-in-out;
z-index: 10;
}
.item .img {
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #eee;
background-size: 150%;
background-position: 50% 10%;
transform: rotate(10deg);
-ms-transform: rotate(10deg);
/* IE 9 */
-webkit-transform: rotate(10deg);
/* Safari and Chrome */
-o-transform: rotate(10deg);
/* Opera */
-moz-transform: rotate(10deg);
/* Firefox */
-webkit-transition: all 500ms ease-in-out;
/** Chrome & Safari **/
-moz-transition: all 500ms ease-in-out;
/** Firefox **/
-o-transition: all 500ms ease-in-out;
/** Opera **/
-ms-transition: all 500ms ease-in-out;
/** IE **/
transition: all 500ms ease-in-out;
}
.item:hover .img {
background-size: 100%;
background-position: 100% 100%;
transform: rotate(0);
-ms-transform: rotate(0);
/* IE 9 */
-webkit-transform: rotate(0);
/* Safari and Chrome */
-o-transform: rotate(0);
/* Opera */
-moz-transform: rotate(0);
/* Firefox */
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
position: absolute;
z-index: 100;
}
.item:hover {
z-index: 100;
}
.item .info {
width: 300px;
padding: 20px;
background: rgba(0, 0, 0, 0.7);
color: #eee;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 12px;
/*display: none; */
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari and Chrome */
-o-transform: rotate(90deg);
/* Opera */
-moz-transform: rotate(90deg);
/* Firefox */
position: absolute;
top: 0;
right: -340px;
z-index: 1;
opacity: 0;
-webkit-transition: all 500ms ease-in-out;
/** Chrome & Safari **/
-moz-transition: all 500ms ease-in-out;
/** Firefox **/
-o-transition: all 500ms ease-in-out;
/** Opera **/
-ms-transition: all 500ms ease-in-out;
/** IE **/
transition: all 500ms ease-in-out;
}
.item .info.left {
top: 0;
left: -340px;
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
/* IE 9 */
-webkit-transform: rotate(-90deg);
/* Safari and Chrome */
-o-transform: rotate(-90deg);
/* Opera */
-moz-transform: rotate(-90deg);
/* Firefox */
}
.item:hover .info {
display: block;
transform: rotate(0);
-ms-transform: rotate(0);
/* IE 9 */
-webkit-transform: rotate(0);
/* Safari and Chrome */
-o-transform: rotate(0);
/* Opera */
-moz-transform: rotate(0);
/* Firefox */
opacity: 1;
position: absolute;
z-index: 1;
transition-delay: 500ms;
-moz-transition-delay: 500ms;
/* Firefox 4 */
-webkit-transition-delay: 500ms;
/* Safari and Chrome */
-o-transition-delay: 500ms;
/* Opera */
}
</style>
</head>
<body>
<div class="container">
<div class="item id1">
<div class="img"></div>
<div class="info">
<p>DevAnswer is one of the best sites to find free codes and scripts. Just visit the site, choose a category and select your desired code.</p>
<a href="http://devanswer.com">Visit the Site</a>
</div>
</div>
<div class="item id2">
<div class="img"></div>
<div class="info">
<p>DevAnswer is one of the best sites to find free codes and scripts. Just visit the site, choose a category and select your desired code.</p>
<a href="http://devanswer.com">Visit the Site</a>
</div>
</div>
<div class="item id3">
<div class="img"></div>
<div class="info">
<p>DevAnswer is one of the best sites to find free codes and scripts. Just visit the site, choose a category and select your desired code.</p>
<a href="http://devanswer.com">Visit the Site</a>
</div>
</div>
<div class="item id4">
<div class="img"></div>
<div class="info left">
<p>DevAnswer is one of the best sites to find free codes and scripts. Just visit the site, choose a category and select your desired code.</p>
<a href="http://devanswer.com">Visit the Site</a>
</div>
</div>
<div class="item id5">
<div class="img"></div>
<div class="info left">
<p>DevAnswer is one of the best sites to find free codes and scripts. Just visit the site, choose a category and select your desired code.</p>
<a href="http://devanswer.com">Visit the Site</a>
</div>
</div>
<div class="item id6">
<div class="img"></div>
<div class="info left">
<p>DevAnswer is one of the best sites to find free codes and scripts. Just visit the site, choose a category and select your desired code.</p>
<a href="http://devanswer.com">Visit the Site</a>
</div>
</div>
<div class="item id7">
<div class="img"></div>
<div class="info left">
<p>DevAnswer is one of the best sites to find free codes and scripts. Just visit the site, choose a category and select your desired code.</p>
<a href="http://devanswer.com">Visit the Site</a>
</div>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>
