When a thumbnail is focused or hovered, what should happen to the others? One solution is to fade them, so the main thumbnail is focused! Besides, where do you want to put the thumbnail description? Put it on its other side, which appears when it is clicked! Isn’t it amazing?!
HTML
<!-- This script got from www.devanswer.com -->
<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>
CSS
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;
}Javascript
$('#projects > li').hover(function () {
$(this).siblings().addClass('blur');
}, function () {
$(this).removeClass('clicked').siblings().removeClass('blur');
});
$('#projects > li').click(function (e) {
$(this).addClass('clicked');
});
