"hover img effect"
Bootstrap 3.0.0 Snippet by Thomanphan

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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> <p>Doing some illustrations for Glyph. From left to right: Foodie, Explorer, Gas Guzzler, Gatherer, Superstar, and Shopaholic.</p><p> Probably going to iterate some more on foodie. I like it because it's minimal, but some don't get that it's sushi.</p> <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> <p>Itsy Theme "minimal"</p><p> ↓ Download<br /> https://cl.ly/Mzol</p> <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> <p>A concept I've 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><p> I'd really like to know what you guys think.</p> <p class="date">Feb 18, 2013</p> </div> </li> </ul> </body> <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 { 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; }

Related: See More


Questions / Comments: