jQuery CSS Flipping Thumbnail Example With Hover Effect

jQuery CSS Flipping Thumbnail Example With Hover Effect
Zooming is out approach to show choice. Centering or blurring impact is another. In this way, why not blend them two. That is actually what’s done here. In the image gallery as you drift on one picture, it somewhat zooms while obscuring rest of the images as thumbnail impact so you don’t need to separate the core interest. Enough of simply unadulterated CSS and HTML thumbnail example, how about we plunge into some jQuery and CSS code also for some astounding image impact.

Jquery CSS Flipping Thumbnail Example With Hover Effect

HTML

<body>
  <ul id="projects">
    <li id="p1" class="flipper">
      <div class="front"><img src="https://dribbble.s3.amazonaws.com/users/1960/screenshots/948220/icons_1x.png" alt="">
      </div>
      <div class="back">
            <h2>Glyph Profiles</h2>
      <p class="author">by <a href="http://dribbble.com/brandclay">Sean Farrell</a></p>
        Doing some illustrations for Glyph. From left to right: Foodie, Explorer, Gas Guzzler, Gatherer, Superstar, and Shopaholic.
 
 
Probably going to iterate some more on foodie. I like it because its minimal, but some do not get that its sushi.
      <p class="date">Feb 18, 2013</p>
      </div>
    </li><!--
    --><li id="p2" class="flipper">
      <div class="front"><img src="https://dribbble.s3.amazonaws.com/users/8868/screenshots/949182/_dribbble____024_-_itsy_theme__22minimal_22.png" alt="">
      </div>
      <div class="back">
          <h2>Itsy theme "minimal"</h2>
      <p class="author">by <a href="http://dribbble.com/hiroshi1012">hiroshi</a></p>
        Itsy Theme "minimal"
 
 
        ↓ Download<br />
https://cl.ly/Mzol
      <p class="date">Feb 18, 2013</p>
    </div>
    </li><!--
    --><li id="p3" class="flipper">
      <div class="front"><img src="https://dribbble.s3.amazonaws.com/users/3587/screenshots/948687/untitled-1.jpg" alt=""></div>
    <div class="back">
      <h2>Portfolio Design</h2>
      <p class="author">by <a href="http://dribbble.com/NpaulFlavius">Paul Flavius Nechita</a></p>
      A concept I have put together for my lovely Elena Greta Apostol. This is meant to be a portfolio/store that should reflect the quality of her work.
 
<p>
I'd really like to know what you guys think.
      <p class="date">Feb 18, 2013</p>
    </div>
    </li>
</ul>
</body>


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;
}


JS

$('#projects > li').hover(function(){
  $(this).siblings().addClass('blur');
}, function(){
  $(this).removeClass('clicked').siblings().removeClass('blur');
 
});
 
$('#projects > li').click(function(e){
  $(this).addClass('clicked');
});

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by CBeghin. Visit their official repository for more information and follow for future updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.