All credit goes to Mary Lou of Codrops http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/
Created
May 15, 2019 10:11
-
-
Save mrmoyeez/3a6ea086dab8948a91778b9b5f89f292 to your computer and use it in GitHub Desktop.
3D THUMBNAIL HOVER EFFECTS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- From Mary Lou at CoDrops https://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/ --> | |
| <div id="grid" class="main"> | |
| <!-- 1 --> | |
| <div class="view"> | |
| <div class="view-back"> | |
| <span>Folded</span> | |
| <a href="http://www.flickr.com/photos/willinteractive/5884566609/" title="PF-9807.jpg by willinteractive, on Flickr">→</a> | |
| </div> | |
| <img src="http://farm6.staticflickr.com/5240/5884566609_9731cf0786.jpg" width="300" height="200" alt="PF-9807"> | |
| </div> | |
| <!-- 2 --> | |
| <div class="view"> | |
| <div class="view-back"> | |
| <span>Curve up</span> | |
| <a href="http://www.flickr.com/photos/willinteractive/5884567683/" title="PF-9817.jpg by willinteractive, on Flickr">→</a> | |
| </div> | |
| <img src="http://farm7.staticflickr.com/6018/5884567683_cdf88797a5.jpg" width="300" height="200" alt="PF-9817"> | |
| </div> | |
| <!-- 3 --> | |
| <div class="view"> | |
| <div class="view-back"> | |
| <span>Curve Down</span> | |
| <a href="http://www.flickr.com/photos/willinteractive/5884568609/" title="PF-9818.jpg by willinteractive, on Flickr">→</a> | |
| </div> | |
| <img src="http://farm6.staticflickr.com/5199/5884568609_2fc30c874d.jpg" width="300" height="200" alt="PF-9818"> | |
| </div> | |
| <!-- 4 --> | |
| <div class="view"> | |
| <div class="view-back"> | |
| <span>Half-Folded</span> | |
| <a href="http://www.flickr.com/photos/willinteractive/5884569375/" title="PF-9835.jpg by willinteractive, on Flickr">→</a> | |
| </div> | |
| <img src="http://farm6.staticflickr.com/5305/5884569375_f9a773a945.jpg" width="300" height="200" alt="PF-9835"> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| $.fn.hoverfold = function(options) { | |
| this.each( function() { | |
| $( this ).children( '.view' ).each( function() { | |
| var $item = $( this ), | |
| img = $item.children( 'img' ).attr( 'src' ), | |
| struct = '<div class="slice s1">'; | |
| struct +='<div class="slice s2">'; | |
| struct +='<div class="slice s3">'; | |
| struct +='<div class="slice s4">'; | |
| struct +='<div class="slice s5">'; | |
| struct +='</div>'; | |
| struct +='</div>'; | |
| struct +='</div>'; | |
| struct +='</div>'; | |
| struct +='</div>'; | |
| var $struct = $( struct ); | |
| $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) ); | |
| } ); | |
| }); | |
| }; | |
| })(jQuery); | |
| $(function() { | |
| $('#grid').hoverfold(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass/css3"; | |
| body { background: url('http://farm5.staticflickr.com/4098/4813867870_70d0f479a7.jpg'); } | |
| .view { | |
| width: 300px; | |
| height: 200px; | |
| margin: 20px; | |
| float: left; | |
| position: relative; | |
| border: 8px solid #fff; | |
| box-shadow: 1px 1px 2px rgba(0,0,0,0.05); | |
| background: #333; | |
| perspective: 500px; | |
| img { | |
| position: absolute; | |
| z-index: 0; | |
| transition: left 0.3s ease-in-out; | |
| } | |
| .s2, .s3, .s4, .s5 { transform: translateX(60px); } | |
| .s1, .s2, .s3, .s4, .s5 { | |
| background-position-y: -60px; | |
| } | |
| .s1 { background-position-x: -120px; } | |
| .s2 { background-position-x: -180px; } | |
| .s3 { background-position-x: -240px; } | |
| .s4 { background-position-x: -300px; } | |
| .s5 { background-position-x: -360px; } | |
| .overlay { | |
| width: 60px; | |
| height: 100%; | |
| opacity: 0; | |
| position: absolute; | |
| transition: opacity 150ms ease-in-out; | |
| } | |
| &:hover .overlay { opacity: 1; } | |
| } | |
| .view div.view-back{ | |
| width: 50%; | |
| height: 100%; | |
| position: absolute; | |
| right: 0; | |
| background: #666; | |
| z-index: 0; | |
| span { | |
| position: absolute; | |
| left: 80px; | |
| bottom: 120px; | |
| color: rgba(255,255,255,.4); | |
| text-transform: uppercase; | |
| transform: rotate(90deg); | |
| z-index: 0; | |
| } | |
| a { | |
| display: bock; | |
| font-size: 18px; | |
| color: rgba(255,255,255,0.4); | |
| position: absolute; | |
| right: 15px; | |
| bottom: 15px; | |
| border: 2px solid rgba(255,255,255,0.3); | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| line-height: 31px; | |
| text-align: center; | |
| font-weight: bold; | |
| text-decoration: none; | |
| &:hover { | |
| color: #fff; | |
| border-color: #fff; | |
| }}} | |
| .view .slice{ | |
| width: 60px; | |
| height: 100%; | |
| z-index: 100; | |
| transform-style: preserve-3d; | |
| transform-origin: left center; | |
| transition: transform 150ms ease-in-out; | |
| } | |
| /* ADD THESE STYLES FOR BROWSERS THAT DON'T SUPPORT 3D CSS | |
| .view { | |
| overflow: hidden; | |
| } | |
| .view:hover img { | |
| left: -85px; | |
| } | |
| .view div.view-back { | |
| background: #666; | |
| } | |
| */ | |
| /* FOLDING EFFECT */ | |
| .view:first-of-type { | |
| perspective: 1050px; | |
| div { transition: all 0.3s ease-in-out; } | |
| &:hover { | |
| .s2 { transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg); } | |
| .s3, .s5 { transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg); } | |
| .s4 { transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg); } | |
| } | |
| .s1 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); } | |
| .s2 > .overlay { background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); } | |
| .s3 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%); } | |
| .s4 > .overlay { background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); } | |
| .s5 > .overlay { background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); } | |
| div.view-back { background: linear-gradient(left, #0a0a0a 0%,#666666 100%); } | |
| } | |
| /* CURVED UP EFFECT */ | |
| .view:nth-of-type(2) { | |
| perspective: 800px; | |
| &:hover { | |
| .s1 { transition-delay: 200ms; transform: rotate3d(0,1,0,-3deg); } | |
| .s2 { transition-delay: 150ms; transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg); } | |
| .s3 { transition-delay: 100ms; transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg); } | |
| .s4 { transition-delay: 50ms; transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg); } | |
| .s5 { transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg); } | |
| } | |
| .s4 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); } | |
| .s5 > .overlay { background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); } | |
| div.view-back { background: #0a0a0a; background: linear-gradient(left, #0a0a0a 0%,#666666 100%); } | |
| } | |
| /* CURVED DOWN EFFECT */ | |
| .view:nth-of-type(3) { | |
| perspective: 1000px; | |
| &:hover { | |
| .s1 { transform: rotate3d(0,1,0,-55deg); } | |
| .s2, .s5 { transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg); } | |
| .s3 { transform: translate3d(59px,0,0) rotate3d(0,1,0,30deg); } | |
| .s4 { transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg); } | |
| } | |
| .s1 > .overlay { background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); } | |
| .s5 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); } | |
| } | |
| /* HALF-FOLDED EFFECT */ | |
| .view:last-of-type { | |
| perspective: 1050px; | |
| div { transition: all 0.3s ease-in-out; } | |
| &:hover { | |
| .s3 { transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg); } | |
| .s4 { transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg); } | |
| .s5 { transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg); } | |
| } | |
| .s2 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); } | |
| .s3 > .overlay { background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); } | |
| .s4 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%); } | |
| .s5 > .overlay { background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); } | |
| div.view-back { background: linear-gradient(left, #0a0a0a 0%,#666666 100%); } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment