WordPress Themes Blog Oh! Blog


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!


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

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

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


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

  2. HGIT left a comment on May 27, 2018 at 7:29 pm |

    Always want to learn about 3D Style Image Thumbnails.Thank you for sharing,

    Huagong Innovation Technology Co.,Ltd.HGIT is a professional provider of polyurethane automatic equipment and sealing system solutions.The company is located in the beautiful coastal city —Dalian. HGIT equipment of Huagong has a number of independent intellectual property rights,and also has the features of stable,secure,reliable etc. E-mail?hgcx@vip.163.com,info@hgcx.cn TEL? +86-411-39525022 FAX? +86-411-39525009 Website?http://www.hgcx.cn/en foaming machine CNC PU Seal Pouring Machine Foam sealing gasket machine Injection (Potting) Machine barrier-strip foam technique Spraying cementing machine Foam sealing machine (FIPFG) PU gasket sealing machine Warm Edge Spacer Forming Machine

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

    Great tutorial and easy to follow, thanks for sharing.

    Suncode – IT Support London

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

    Great Article–thanks

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

    Interesting! Do you have an example on your site anywhere
    – Shea from Conosco IT Support, http://www.conosco.com

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

    Just curious. Would these 3D images be mobile responsive as well?
    Burhani – Managed IT Services

  7. huagongkeji left a comment on March 21, 2016 at 9:25 pm |

    HGIT is the professional manufacturer for two axis foam sealing machine, this machine can be used in Filter, cabinet, lighting, battery, etc.
    German Beckhoff dispensing operation system. Operation interface is indicated in both Chinese and English; if there is any need, other languages can be added. The system boasts functions such as false operation reminding, idiot-proof protection, overpressure alarming, temperature alarming and low material level reminding.
    When operating the human-machine interface, the operator only needs to enter commands in the interface such as “Confirm” and “Start” for loading and unloading of workpieces, and then the equipment can automatically complete the required function operations.
    The control system is CNC2013 control system independently researched and developed by the Company. It can control multiple axes simultaneously and control dispensing speed and glue flow, with multi-formula storage function, pressure alarming function, etc. which makes it safer and user-friendly.
    The dispensing valve and mixer match with each other well, easy to operate and convenient for maintenance.
    Two components metering pump can choose Domestic pump or Germany pump according to customer demand

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


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

    great .thank you

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

    Thanks a lot, I really likes this tutorial.

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

    i like your article

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

    Great pictures and images. Visit our site for some IT support services http://www.prosyn.co.uk

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

    good picture

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

    thank you

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

    az kald? bu html sisteminide ö?renecem

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

    One word: awesome

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

    Super awesome thumbnail style…

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

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

  19. 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

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

    nice effect …
    i use it in my clients projects …

  21. 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