Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
body {
background: #DDD;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #555;
font-size: 15px;
line-height: 1.3em;
}
h2 {
font-size: 20px;
color: #333;
margin: 7px 0;
}
a:hover {
text-decoration: none;
color: #205F82;
}
a:link,a:visited {
color: #4083A9;
outline: none;
text-decoration: none;
}
.author {
font-size: 13px;
margin: 5px 0 25px;
}
.date {
font-size: 13px;
font-weight: bold;
}
/**/
#projects {
width: 1200px;
margin: 30px auto;
perspective: 1000;
}
#projects .flipper {
width: 400px;
height: 300px;
display: inline-block;
-webkit-transform: scale(0.90);
-moz-transform: scale(0.90);
-o-transform: scale(0.90);
-ms-transform: scale(0.90);
transform: scale(0.90);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.2);
box-shadow: 0 3px 5px rgba(0,0,0,.2);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
#projects .flipper:hover {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 5px 25px rgba(0,0,0,.2);
box-shadow: 0 5px 25px rgba(0,0,0,.2);
cursor: pointer;
}
#projects .flipper.blur {
-webkit-filter: blur(3px);
-webkit-transform: scale(0.88);
-moz-transform: scale(0.88);
-o-transform: scale(0.88);
-ms-transform: scale(0.88);
transform: scale(0.88);
filter: alpha(opacity=60);
opacity: 0.6;
}
#projects .flipper.rotate {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#projects:hover .clicked {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.front,.back {
width: 400px;
height: 300px;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.front {
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
width: 360px;
height: 260px;
padding: 20px;
z-index: 1;
background: white;
}
</style>
</head>
<body>
<ul id="projects">
<li id="p1" class="flipper">
<div class="front"><img src="http://devanswer.com/codes/files/company1.jpg" alt="">
</div>
<div class="back">
<h2>DevAnswer 1</h2>
<p class="author">See: <a href="http://devanswer.com">Our Site</a></p>
<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>
<p class="date">Feb 18, 2019</p>
</div>
</li><li id="p2" class="flipper">
<div class="front"><img src="http://devanswer.com/codes/files/company2.jpg" alt="">
</div>
<div class="back">
<h2>DevAnswer 2</h2>
<p class="author">See: <a href="http://devanswer.com">Our Site</a></p>
<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>
<p class="date">Feb 19, 2019</p>
</div>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$('#projects > li').hover(function () {
$(this).siblings().addClass('blur');
}, function () {
$(this).removeClass('clicked').siblings().removeClass('blur');
});
$('#projects > li').click(function (e) {
$(this).addClass('clicked');
});
</script>
</body>
</html>
