3D Style Image 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

About Jai

I am a blogger and a web designer.

39 replies on “3D Style Image Thumbnails”

Jennifer Garner Reply

May 11, 2021 at 1:00 am

Thanks For sharing with us

Chavez Reply

May 3, 2021 at 1:55 am

Thanks for sharing

Gayle Reply

May 3, 2021 at 1:54 am

Thanks for sharing

Rose Watson Reply

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!

Steve Martin Reply

April 7, 2021 at 12:36 am

Thanks for sharing with us

Todd Reply

March 16, 2021 at 2:39 am

Thanks a lot for the tutorial.

Amin Reply

March 1, 2021 at 6:15 am

I liked it very much

Steve Trump Reply

March 1, 2021 at 6:11 am

It was very nice

James Adamson Reply

January 21, 2021 at 6:26 am

It was so informative tutorial. thanks!

Andre Dehghan Reply

October 28, 2020 at 7:06 am

thank you

Naveed Aziz Reply

August 29, 2020 at 3:43 am

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

fredluis Reply

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.