WordPress Themes Blog Oh! Blog

3d-thumbnails

We all know that image thumbnails are pretty boring until they have some neat hover effect on them, or some kind of jazzy animation before the user clicks on them.

So, here is a tutorial which uses CSS3 to achieve a 3D hover effect on the image thumbnails. It certainly looks neat. If you don’t believe me, read the tutorial and check out the demo yourself!

HTML

Make a new HTML file called index.html and copy the following code into it.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d Thumbnails</title>
<link href="thumbstyle.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>3D Thumbnails</h1>
<div class="container">
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image1">
		<!-- Label -->
		<span>Friends Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image2">
		<!-- Label -->
		<span>Smile Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image3">
		<!-- Label -->
		<span>Angry Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image4">
		<!-- Label -->
		<span>Happy Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image5">
		<!-- Label -->
		<span>Batman Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image6">
		<!-- Label -->
		<span>Wild Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image7">
		<!-- Label -->
		<span>Cartoon Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image8">
		<!-- Label -->
		<span>3D Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image9">
		<!-- Label -->
		<span>Sad Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image10">
		<!-- Label -->
		<span>Flying Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image11">
		<!-- Label -->
		<span>Strong Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image12">
		<!-- Label -->
		<span>Dragon Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image13">
		<!-- Label -->
		<span>Monster Forever!</span>
	</a>
</div>
<div class="thumb">
	<!-- Image -->
	<a href="#" class="image14">
		<!-- Label -->
		<span>Nature Forever!</span>
	</a>
</div>
</div>
</body>
</html>

The above code is just plain HTML for image thumbnails. The core work is done through the CSS file.

CSS

Make a new CSS file and name it thumbstyle.css and save it in the same location as the above index.html file.

@import url(https://fonts.googleapis.com/css?family=Allan);
/*basic reset*/
* {margin: 0; padding: 0;}
/*forcing the body to take 100% height*/
html, body {min-height: 100%;}
/*a nice BG*/
body {
	background: #360; /*fallback*/
	background: linear-gradient( #09C, #06C);
}
h1 {font-family:Allan; text-align:center; font-size:60px; color:#FFF; margin:20px; text-shadow:1px 1px #333;}
.container {width:100%; margin:30px auto 30px 30px;}
/*Thumbnail Background*/
.thumb {
	width: 200px; height: 200px; margin:30px;
	perspective: 1000px; -webkit-perspective:1000px; float:left;
}
.thumb a {
	display: block; width: 100%; height: 100%;
	transform-style: preserve-3d; -ms-transform-style:preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d;
    -webkit-transition:all .50s;	-moz-transition:all .50s;	-o-transition:all .50s; transition:all .50s;
}
.thumb:hover a {transform: rotateX(80deg); -webkit-transform:rotateX(80deg); -ms-transform:rotateX(80deg); -moz-transform:rotateX(80deg); -o-transform:rotateX(80deg); transform-origin: bottom; -webkit-transform-origin:bottom;}
/*bottom surface */
.thumb a:after {
	/*36px high element positioned at the bottom of the image*/
	content: ''; position: absolute; left: 0; bottom: 0; 
	width: 100%; height: 36px;
	/*inherit the main BG*/
	background: rgba(0,0,0,0.8); background-size: cover, cover;
	/*draw the BG bottom up*/
	background-position: bottom;
	/*rotate the surface 90deg on the bottom axis*/
	transform: rotateX(90deg); -webkit-transform:rotateX(90deg); -ms-transform:rotateX(90deg); -moz-transform:rotateX(90deg); -o-transform:rotateX(90deg); transform-origin: bottom;-webkit-transform-origin:bottom;
}
/*label style*/
.thumb a span {
	color: #fff; text-transform: uppercase;
	position: absolute; top: 100%; left: 0; width: 100%;
	font: 22px Allan; text-align: center; padding-top:5px;
	/*the rotation is a bit less than the bottom surface to avoid flickering*/
	transform: rotateX(-89.99deg);  -webkit-transform:rotateX(-89.99deg); -ms-transform:rotateX(-89.99deg); -moz-transform:rotateX(-89.99deg); -o-transform:rotateX(-89.99deg);transform-origin: top;-webkit-transform-origin:top;
	z-index: 1;
}
/*shadow*/
.thumb a:before {
	content: ''; position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.5); 
	box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.6);
	transition: all 0.5s; 
	/*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/
	opacity: 0.15;
	transform: rotateX(95deg) translateZ(-80px) scale(0.75);  -webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75); -ms-transform: rotateX(95deg) translateZ(-80px) scale(0.75); -moz-transform: rotateX(95deg) translateZ(-80px) scale(0.75); -o-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
	transform-origin: bottom;-webkit-transform-origin:bottom;
}
.thumb:hover a:before {
	opacity: 1;
	/*blurred effect using box shadow as filter: blur is not supported in all browsers*/
	box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
	/*pushing the shadow down and scaling it down to size*/
	transform: rotateX(0) translateZ(-60px) scale(0.85); -webkit-transform: rotateX(0) translateZ(-60px) scale(0.85); -ms-transform: rotateX(0) translateZ(-60px) scale(0.85); -moz-transform: rotateX(0) translateZ(-60px) scale(0.85); -o-transform: rotateX(0) translateZ(-60px) scale(0.85); 
}

.thumb a.image1 {background: url(https://d13yacurqjgara.cloudfront.net/users/10562/screenshots/872407/marceline_dribble.jpg) center; background-size:cover;}
.thumb a.image2 {background: url(https://d13yacurqjgara.cloudfront.net/users/33320/screenshots/482481/3d_face.jpg) center; background-size:cover;}
.thumb a.image3 {background: url(https://d13yacurqjgara.cloudfront.net/users/33320/screenshots/951112/cartman.png) center; background-size:cover;}
.thumb a.image4 {background: url(https://d13yacurqjgara.cloudfront.net/users/4467/screenshots/661196/sasquatch-troop-full.jpg) center; background-size:cover;}
.thumb a.image5 {background: url(https://d13yacurqjgara.cloudfront.net/users/40016/screenshots/1358207/bats_1x.png) center; background-size:cover;}
.thumb a.image6 {background: url(https://d13yacurqjgara.cloudfront.net/users/4467/screenshots/304344/tony-the-tiger.jpg) center; background-size:cover;}
.thumb a.image7 {background: url(https://d13yacurqjgara.cloudfront.net/users/10562/screenshots/258839/the_flintstones_dribble.jpg) center; background-size:cover;}
.thumb a.image8 {background: url(https://d13yacurqjgara.cloudfront.net/users/113424/screenshots/709032/dr1.png) center; background-size:cover;}
.thumb a.image9 {background: url(https://d13yacurqjgara.cloudfront.net/users/35950/screenshots/1143200/redhead_1x.jpg) center; background-size:cover;}
.thumb a.image10 {background: url(https://d13yacurqjgara.cloudfront.net/users/4767/screenshots/137253/shot_1301072406.png) center; background-size:cover;}
.thumb a.image11 {background: url(https://d13yacurqjgara.cloudfront.net/users/4767/screenshots/1090838/warrior_1x.png) center; background-size:cover;}
.thumb a.image12 {background: url(https://d13yacurqjgara.cloudfront.net/users/4767/screenshots/454459/dragon.png) center; background-size:cover;}
.thumb a.image13 {background: url(https://d13yacurqjgara.cloudfront.net/users/67884/screenshots/1117880/ahhhh_monster__1x.jpg) center; background-size:cover;}
.thumb a.image14 {background: url(https://d13yacurqjgara.cloudfront.net/users/2404/screenshots/24018/shot_1275616378.jpg) center; background-size:cover;}

To add or delete images, just edit the .thumb a.image class in the CSS file.

Demo & Files

Here is the working demo and link to the files that you can download :-

3D Thumbnails Demo
Download Files

  1. Rose Watson left a comment on April 15, 2021 at 9:06 pm |

    Your all information so nice or helpful in our business. Thanks for this sharing to this post here!

  2. Steve Martin left a comment on April 7, 2021 at 12:36 am |

    Thanks for sharing with us

  3. Todd left a comment on March 16, 2021 at 2:39 am |

    Thanks a lot for the tutorial.

  4. Amin left a comment on March 1, 2021 at 6:15 am |

    I liked it very much

  5. Steve Trump left a comment on March 1, 2021 at 6:11 am |

    It was very nice

  6. James Adamson left a comment on January 21, 2021 at 6:26 am |

    It was so informative tutorial. thanks!

  7. Andre Dehghan left a comment on October 28, 2020 at 7:06 am |

    thank you

  8. Naveed Aziz left a comment on August 29, 2020 at 3:43 am |

    Thank you for the information about schema implementations in word-press

  9. fredluis left a comment on July 24, 2019 at 12:46 am |

    Great Work! And thank you for your effort giving up nice themes! I would like to know if I am allowed to rename the theme and make changes on the code giving up my style and brand new names on it.

  10. Cassandra D. Everhart left a comment on June 28, 2019 at 12:55 am |

    Many thanks approving towards the great data. Purely nondiscriminatory when upwards!

  11. Cassandra D. Everhart left a comment on June 20, 2019 at 10:16 pm |

    cool, this take cares one of my needs.

  12. Daniel Perez left a comment on June 20, 2019 at 1:02 am |

    In our Graphic Design class, my teacher introduce me about this 3D image design. This is very nice and enjoy ! Thanks.

  13. Joshua A. Price left a comment on May 10, 2019 at 3:12 am |

    I definitely enjoyed every bit of it and I have you bookmarked your blog to check out the new stuff you post in the future.

  14. Care Force left a comment on May 2, 2019 at 12:37 am |

    Great job.

  15. Bella  left a comment on December 3, 2018 at 10:02 pm |

    I did enjoyed reading this content; I am bookmarking your blog and definitely will come back again.

  16. Suncode left a comment on January 24, 2017 at 2:21 am |

    Great tutorial and easy to follow, thanks for sharing.

  17. Response IT left a comment on November 21, 2016 at 2:20 pm |

    Great Article–thanks

  18. Conosco – IT Support left a comment on September 20, 2016 at 2:50 am |

    Interesting! Do you have an example on your site anywhere

  19. Burhani – Managed IT Services left a comment on May 2, 2016 at 3:09 pm |

    HI,
    Just curious. Would these 3D images be mobile responsive as well?
    Thanks

  20. gks web studio left a comment on May 12, 2015 at 2:48 pm |

    I THINK THIS WILL BE SO MUCH SLOW SITE ! DO YOU AGREE WITH ME ?
    3D IN SITE ATT ALL HAVE PROBLEM !!!!

  21. iranixea left a comment on March 12, 2015 at 1:41 am |

    great .thank you

  22. Sanjeev left a comment on February 2, 2015 at 9:01 am |

    Thanks a lot, I really likes this tutorial.

  23. Pembesar Payudara left a comment on December 17, 2014 at 5:14 am |

    i like your article

  24. Louise left a comment on December 8, 2014 at 4:56 am |

    Great pictures and images.

  25. mersin bilgisayar left a comment on November 26, 2014 at 2:46 am |

    good picture

  26. Asansörlü Ta??mac?l?k Mersin left a comment on November 11, 2014 at 8:43 am |

    thank you

  27. mersin evden eve left a comment on November 11, 2014 at 8:43 am |

    az kald? bu html sisteminide ö?renecem

  28. My blog left a comment on October 12, 2014 at 7:52 am |

    One word: awesome

  29. Pemutih Ketiak left a comment on September 17, 2014 at 4:19 am |

    Super awesome thumbnail style…

  30. online left a comment on September 4, 2014 at 4:05 am |

    Very nice. It is great to see local theme developer.

  31. Leon left a comment on August 19, 2014 at 4:50 am |

    Hello Namaste Ji !
    THANKS for Your design job and for your friend !
    Very Nice !
    Good Luck for you and this web-project!
    Leon from Ukraine

  32. amir left a comment on March 3, 2014 at 11:59 pm |

    nice effect …
    i use it in my clients projects …
    thanks

  33. Karta left a comment on February 27, 2014 at 4:39 pm |

    wow. very good
    I need to use !

Leave a Comment

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

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
Need a Custom Website?

Leave a Feedback

    Tell Me About Your Project