3D Thumbnail Hover Effects

by
3D Thumbnail Hover Effects
Code Snippet:3D THUMBNAIL HOVER EFFECTS
Author: chorn99
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 530
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (5 KB)

This code creates captivating 3D thumbnail hover effects for images. It works by transforming images into slices, giving them a dynamic appearance on hover. The core method, “hoverfold,” enhances your website’s visual appeal by providing engaging image transitions on mouseover. This code is helpful for creating eye-catching image galleries and enhancing user interaction.

You can use this code in your website to add stunning hover effects to your image galleries, product showcases, or portfolio items.

How to Create 3D Thumbnail Hover Effects

1. First, make sure to include the jQuery library, Modernizr JS, Normalize CSS, and Prefixfree JS in your HTML file. You can do this by adding the following line just before the closing </body> tag in your HTML:

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

2. Create a container element for your image gallery in your HTML. Give it an ID, like “grid”. Inside the “grid” container, insert your images as shown below. Replace the sample images with your own:

<!-- 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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</a>
    </div>
    <img src="http://farm6.staticflickr.com/5305/5884569375_f9a773a945.jpg" width="300" height="200" alt="PF-9835">
  </div>
</div>

3. The following CSS code adds styling to the hover effects. You can customize it to match your website’s design by modifying the CSS in the code.

.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;
}
.view img {
  position: absolute;
  z-index: 0;
  transition: left 0.3s ease-in-out;
}
.view .s2, .view .s3, .view .s4, .view .s5 {
  transform: translateX(60px);
}
.view .s1, .view .s2, .view .s3, .view .s4, .view .s5 {
  background-position-y: -60px;
}
.view .s1 {
  background-position-x: -120px;
}
.view .s2 {
  background-position-x: -180px;
}
.view .s3 {
  background-position-x: -240px;
}
.view .s4 {
  background-position-x: -300px;
}
.view .s5 {
  background-position-x: -360px;
}
.view .overlay {
  width: 60px;
  height: 100%;
  opacity: 0;
  position: absolute;
  transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {
  opacity: 1;
}

.view div.view-back {
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  background: #666;
  z-index: 0;
}
.view div.view-back span {
  position: absolute;
  left: 80px;
  bottom: 120px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  transform: rotate(90deg);
  z-index: 0;
}
.view div.view-back 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;
}
.view div.view-back a: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;
}
.view:first-of-type div {
  transition: all 0.3s ease-in-out;
}
.view:first-of-type:hover .s2 {
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, -45deg);
}
.view:first-of-type:hover .s3, .view:first-of-type:hover .s5 {
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, 90deg);
}
.view:first-of-type:hover .s4 {
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, -90deg);
}
.view:first-of-type .s1 > .overlay {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}
.view:first-of-type .s2 > .overlay {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view:first-of-type .s3 > .overlay {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.view:first-of-type .s4 > .overlay {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
.view:first-of-type .s5 > .overlay {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}
.view:first-of-type div.view-back {
  background: linear-gradient(to right, #0a0a0a 0%, #666666 100%);
}

/* CURVED UP EFFECT */
.view:nth-of-type(2) {
  perspective: 800px;
}
.view:nth-of-type(2):hover .s1 {
  transition-delay: 200ms;
  transform: rotate3d(0, 1, 0, -3deg);
}
.view:nth-of-type(2):hover .s2 {
  transition-delay: 150ms;
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, -10deg);
}
.view:nth-of-type(2):hover .s3 {
  transition-delay: 100ms;
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, -16deg);
}
.view:nth-of-type(2):hover .s4 {
  transition-delay: 50ms;
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, -30deg);
}
.view:nth-of-type(2):hover .s5 {
  transform: translate3d(60px, 0, 0) rotate3d(0, 1, 0, -42deg);
}
.view:nth-of-type(2) .s4 > .overlay {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}
.view:nth-of-type(2) .s5 > .overlay {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}
.view:nth-of-type(2) div.view-back {
  background: #0a0a0a;
  background: linear-gradient(to right, #0a0a0a 0%, #666666 100%);
}

/* CURVED DOWN EFFECT */
.view:nth-of-type(3) {
  perspective: 1000px;
}
.view:nth-of-type(3):hover .s1 {
  transform: rotate3d(0, 1, 0, -55deg);
}
.view:nth-of-type(3):hover .s2, .view:nth-of-type(3):hover .s5 {
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, 20deg);
}
.view:nth-of-type(3):hover .s3 {
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, 30deg);
}
.view:nth-of-type(3):hover .s4 {
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, 40deg);
}
.view:nth-of-type(3) .s1 > .overlay {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}
.view:nth-of-type(3) .s5 > .overlay {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

/* HALF-FOLDED EFFECT */
.view:last-of-type {
  perspective: 1050px;
}
.view:last-of-type div {
  transition: all 0.3s ease-in-out;
}
.view:last-of-type:hover .s3 {
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, -55deg);
}
.view:last-of-type:hover .s4 {
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, 110deg);
}
.view:last-of-type:hover .s5 {
  transform: translate3d(59px, 0, 0) rotate3d(0, 1, 0, -110deg);
}
.view:last-of-type .s2 > .overlay {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}
.view:last-of-type .s3 > .overlay {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view:last-of-type .s4 > .overlay {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.view:last-of-type .s5 > .overlay {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
.view:last-of-type div.view-back {
  background: linear-gradient(to right, #0a0a0a 0%, #666666 100%);
}

4. Place the following JavaScript code in the <script> tags, typically just before the closing </body> tag in your HTML document. This code activates the 3D hover effects.

(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();

	});

That’s all! hopefully, you have successfully created 3D Thumbnail Hover Effects. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X