3D Image Hover Effect using only pure CSS

3d image Hover effects use only CSS features, Like a 3D Animatio and pseudo-elements use, in order to create beautiful 3d effects and to Show captions on the bottom. The looks and feel of a website and use it on your website.

If you want to more batter information then you can visit here. i am also here lot’s of css tutorial for website uses. my recent tutorial you can also check how to create CSS text animation.

This css effects can use every developer, very easy to implement only use css3 code. you can check the live demo or also available source code please download and modify this code and use it.

HTML

<div class="thumb">
	<a href="#">
		<span>Welcome to csspoints</span>
	</a>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
	background: #ccc;
	background: linear-gradient(#ddd, #e8e8e8);
	font-family: 'Open Sans', sans-serif;
	height: 100vh;
	margin: 0;
}
.thumb {
	width: 400px;
	height: 300px;
	margin: 70px auto;
	perspective: 1000px;
}
.thumb a {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://source.unsplash.com/user/erondu/800x600");
	background-size: 0, cover;
	transform-style: preserve-3d;
	transition: all 0.5s;
}
.thumb:hover a {
	transform: rotateX(80deg);
	transform-origin: bottom;
}
.thumb a:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 36px;
	background: inherit;
	background-size: cover, cover;
	background-position: bottom;
	transform: rotateX(90deg);
	transform-origin: bottom;
}
.thumb a span {
	color: white;
	text-transform: uppercase;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	font: bold 12px/36px "Open Sans";
	text-align: center;
	transform: rotateX(-89.99deg);
	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.5);
	transition: all 0.5s;
	opacity: 0.15;
	transform: rotateX(95deg) translateZ(-80px) scale(0.75);
	transform-origin: bottom;
}
.thumb:hover a:before {
	opacity: 1;
	box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
	transform: rotateX(0) translateZ(-60px) scale(0.85);
}

One comment

  1. […] If want learns more about css hover effects then please check this link. My previous demo you can check, please how to create 3D Image Hover Effect using only pure CSS. […]

Leave a Reply