CSS Card 3d Hover Effect Animation

Learn how to create CSS Card 3d Hover Effect Animation.
Author: Swarup Kumar Kuila
Made with: HTML / CSS
Read More: Coffee Machine Pure CSS Animation

HTML

<div class="container mt30">
	<div class="wrapper">
		<ul class="stage clearfix">
			<li class="scene">
				<div class="movie" onlclick="returntrue">
					<div class="poster">
					</div>
					<div class="info">
						<header>
							<h1>Heading</h1>
							<span class="year">20015</span>
							<span class="rating">PG</span>
							<span class="duration">102 M</span>
						</header>
						<p>
							CakeCounter provides specially baked cakes and treats that are available for shipping around the Jamshedpur. Our custom baked cakes are made using fresh and wholesome ingredients and are created with skill and artistry. From brownies and cookies or the perfect strawberry cake, our bakery provides just the right items for celebratory moments or everyday treats.
						</p>
					</div>
				</div>
			</li>

			<li class="scene">
				<div class="movie" onlclick="returntrue">
					<div class="poster">
					</div>
					<div class="info">
						<header>
							<h1>Heading 2</h1>
							<span class="year">20015</span>
							<span class="rating">PG</span>
							<span class="duration">102 M</span>
						</header>
						<p>
							CakeCounter provides specially baked cakes and treats that are available for shipping around the Jamshedpur. Our custom baked cakes are made using fresh and wholesome ingredients and are created with skill and artistry. From brownies and cookies or the perfect strawberry cake, our bakery provides just the right items for celebratory moments or everyday treats.
						</p>
					</div>
				</div>
			</li>

			<li class="scene">
				<div class="movie" onlclick="returntrue">
					<div class="poster">
					</div>
					<div class="info">
						<header>
							<h1>Heading 3</h1>
							<span class="year">20015</span>
							<span class="rating">PG</span>
							<span class="duration">102 M</span>
						</header>
						<p>
							CakeCounter provides specially baked cakes and treats that are available for shipping around the Jamshedpur. Our custom baked cakes are made using fresh and wholesome ingredients and are created with skill and artistry. From brownies and cookies or the perfect strawberry cake, our bakery provides just the right items for celebratory moments or everyday treats.
						</p>
					</div>
				</div>
			</li>

		</ul>
	</div>
</div>

CSS

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	background: #00F260;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #0575E6, #00F260);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #0575E6, #00F260);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	font-family: 'Lato', Arial, sans-serif;
	color: #fff;
	background-position: center;
	background-size: cover;
}
.mt30 {
	margin-top: 30px;
}
.wrapper {
	margin: 0 auto 100px auto;
	max-width: 960px;
}
.stage {
	list-style: none;
	padding: 0;
}

/* uild the scene and rotate on hover */

.scene {
	width: 260px;
	height: 400px;
	margin: 30px;
	float: left;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
}
.movie {
	width: 260px;
	height: 400px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(-130px);
	-moz-transform: translateZ(-130px);
	transform: translateZ(-130px);
	-webkit-transition: -webkit-transform 350ms;
	-moz-transition: -moz-transform 350ms;
	transition: transform 350ms;
}
.movie:hover {
	-webkit-transform: rotateY(-78deg) translateZ(20px);
	-moz-transform: rotateY(-78deg) translateZ(20px);
	transform: rotateY(-78deg) translateZ(20px);
}

/* Transform and style the two planes */

.movie .poster,	.movie .info {
	position: absolute;
	width: 260px;
	height: 400px;
	background-color: #fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.movie .poster {
	-webkit-transform: translateZ(130px);
	-moz-transform: translateZ(130px);
	transform: translateZ(130px);
	background-size: cover;
	background-repeat: no-repeat;
}
.movie .info {
	-webkit-transform: rotateY(90deg) translateZ(130px);
	-moz-transform: rotateY(90deg) translateZ(130px);
	transform: rotateY(90deg) translateZ(130px);
	border: 4px solid #fff;
	font-size: 0.75em;
}

/* Shadow beneath the 3D object */

.csstransforms3d .movie::after {
	content: '';
	width: 260px;
	height: 260px;
	position: absolute;
	bottom: 0;
	box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
	-webkit-transform: rotateX(90deg) translateY(130px);
	-moz-transform: rotateX(90deg) translateY(130px);
	transform: rotateX(90deg) translateY(130px);
	-webkit-transition: box-shadow 350ms;
	-moz-transition: box-shadow 350ms;
	transition: box-shadow 350ms;
}
.csstransforms3d .movie:hover::after {
	box-shadow: 20px -5px 50px rgba(0, 0, 0, 0.3);
}

/* Movie information */

.info header {
	color: #FFF;
	padding: 7px 10px;
	font-weight: bold;
	height: 195px;
	background-size: contain;
	background-repeat: no-repeat;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
}
.info header h1 {
	margin: 0 0 2px;
	font-size: 1.4em;
}
.info header .rating {
	border: 1px solid #FFF;
	padding: 0px 3px;
}
.info p {
	padding: 1.2em 1.4em;
	margin: 2px 0 0;
	color: #395065;
	text-align: justify;
	line-height: 1.4em;
	font-family: sans-serif;

}

/* Generate "lighting" using box shadows */

.movie .poster,	.movie .info,	.movie .info header {
	-webkit-transition: box-shadow 350ms;
	-moz-transition: box-shadow 350ms;
	transition: box-shadow 350ms;
}
.csstransforms3d .movie .poster {
	box-shadow: inset 0px 0px 40px rgba(255, 255, 255, 0);
	background-size: cover;
	background-position: top;
}
.csstransforms3d .movie:hover .poster {
	box-shadow: inset 300px 0px 40px rgba(255, 255, 255, 0.8);
}

.csstransforms3d .movie .info,
.csstransforms3d .movie .info header {
	box-shadow: inset -300px 0px 40px rgba(0, 0, 0, 0.5);
}
.csstransforms3d .movie:hover .info,	.csstransforms3d .movie:hover .info header {
	box-shadow: inset 0px 0px 40px rgba(0, 0, 0, 0);
}

/* Posters and still images */

.scene:nth-child(1) .movie .poster {
	background-image: url("https://cdn.dribbble.com/users/1044993/screenshots/5564939/geek-owl_dribbble.png");
}
.scene:nth-child(2) .poster {
	background-image: url("https://cdn.dribbble.com/users/1044993/screenshots/5400112/vampire_dribbble.png");
}
.scene:nth-child(3) .poster {
	background-image: url("https://cdn.dribbble.com/users/226242/screenshots/5011272/schro_dinger_s_cat_fullview_2x.jpg");
}
.scene:nth-child(1) .info header {
	background-image: url("https://cdn.dribbble.com/users/1044993/screenshots/5564939/geek-owl_dribbble.png");
}
.scene:nth-child(2) .info header {
	background-image: url("https://cdn.dribbble.com/users/1044993/screenshots/5400112/vampire_dribbble.png");
}
.scene:nth-child(3) .info header {
	background-image: url("https://cdn.dribbble.com/users/226242/screenshots/5011272/schro_dinger_s_cat_fullview_2x.jpg");
}

/* Fallback */
.no-csstransforms3d .movie .poster,	.no-csstransforms3d .movie .info {
	position: relative;
}
/* Media Queries */
@media screen and (max-width: 60.75em) {
	.scene {
		float: none;
		margin: 30px auto 60px;
	}
}

2 Comments

  1. This design is spectacular! You obviously know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Excellent job. I really loved what you had to say, and more than that, how you presented it. Too cool!

  2. I really treasure your piece of work, Great post.

Leave a Reply