Hola guys! today you are gonna see something interesting, a flip card made with pure CSS. It’s using the perspective feature of CSS3 which helps in giving an image a perspective whenever we do something to it, like moving it, rotating it or do whatever you want. Clickable Flip Card is what its name will be.

It’s a pretty rare type of clickable flip card style you will not generally see on other websites. It’s not using JS so you can use it even more easily anywhere.

In order for some icons like a star to appear, I am gonna use font-awesome stylesheet icons. First, you need to link the stylesheet in your head. Here is the link for that file.

https://use.fontawesome.com/releases/v5.3.1/css/all.css

So after importing it, let’s see the preview on how it is gonna look after completion.

Preview of Pure CSS clickable flip card.

You might also like this.

How do clickable flip cards work?

CSS clickable Flip Card

For it to work, you need to create 2 files, one for HTML and other for CSS. In the HTML file, you need to create the main div with class-name of the wrapper. Inside this wrapper div, you need to create 3 child elements with class-name of the card. This card class is what we are gonna place all the code.

The HTML code is pretty simple like using font-awesome icons and background-image, let’s look into CSS code.

CSS Part.

I’ll give the main wrapper div a display of flexbox, background color of dark grey to make it appear a bit more clearly. A clear width and height for the card component in order to not make it go here and there.

Backface visibility will be hidden in order to not turn it into a transparent card. Each card has a background image with a layer of gradient above it, it is a commonly used style in order to let content above image to appear more clearly. Anyways the CSS code and HTML both are a bit long. Let’s see them.

Source Code for Clickable Flip Card.

HTML.

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<TITLE>Evil Web Dev | Clickable Flip Card</TITLE>
	<link rel="stylesheet" href="style.scss">
</head>

<body>
	<div class="wrapper">
		<div class="card">
			<input type="checkbox" id="card1" class="more" aria-hidden="true">
			<div class="content">
				<div class="front" style="background-image: url('https://res.cloudinary.com/twenty20/private_images/t_standard-fit/v1521838654/photosp/b12d1791-b61f-46b5-9177-46762facfcf0/b12d1791-b61f-46b5-9177-46762facfcf0.jpg')">
					<div class="inner">
						<h2>Cozy apartment</h2>
						<div class="rating"> <i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
							<i class="far fa-star"></i>
						</div>
						<label for="card1" class="button" aria-hidden="true">Details</label>
					</div>
				</div>
				<div class="back">
					<div class="inner">
						<div class="info"> <span>5</span>
							<div class="icon"> <i class="fas fa-users"></i>
								<span>people</span>
							</div>
						</div>
						<div class="info"> <span>4</span>
							<div class="icon"> <i class="fas fa-door-open"></i>
								<span>rooms</span>
							</div>
						</div>
						<div class="info"> <span>3</span>
							<div class="icon"> <i class="fas fa-bed"></i>
								<span>beds</span>
							</div>
						</div>
						<div class="info"> <span>1</span>
							<div class="icon"> <i class="fas fa-bath"></i>
								<span>bath</span>
							</div>
						</div>
						<div class="description">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, accusamus.</p>
							<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates earum nostrum ipsam ullam, reiciendis nam consectetur? Doloribus voluptate architecto possimus perferendis tenetur nemo amet temporibus, enim soluta nam, debitis.</p>
						</div>
						<div class="location">Warsaw, Poland</div>
						<div class="price">38€ / day</div>
						<label for="card1" class="button return" aria-hidden="true"> <i class="fas fa-arrow-left"></i>
						</label>
					</div>
				</div>
			</div>
		</div>
		<div class="card">
			<input type="checkbox" id="card2" class="more">
			<div class="content">
				<div class="front" style="background-image: url('https://res.cloudinary.com/twenty20/private_images/t_standard-fit/v1521838955/photosp/3efac8c4-3c6f-4867-b418-14a95e69d086/3efac8c4-3c6f-4867-b418-14a95e69d086.jpg')">
					<div class="inner">
						<h2>Modern flat</h2>
						<div class="rating"> <i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
							<i class="fas fa-star-half-alt"></i>
							<i class="far fa-star"></i>
						</div>
						<label for="card2" class="button" aria-hidden="true">Details</label>
					</div>
				</div>
				<div class="back">
					<div class="inner">
						<div class="info"> <span>4</span>
							<div class="icon"> <i class="fas fa-users"></i>
								<span>people</span>
							</div>
						</div>
						<div class="info"> <span>3</span>
							<div class="icon"> <i class="fas fa-door-open"></i>
								<span>rooms</span>
							</div>
						</div>
						<div class="info"> <span>2</span>
							<div class="icon"> <i class="fas fa-bed"></i>
								<span>beds</span>
							</div>
						</div>
						<div class="info"> <span>1</span>
							<div class="icon"> <i class="fas fa-bath"></i>
								<span>bath</span>
							</div>
						</div>
						<div class="description">
							<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde ea voluptas fuga odio vel veniam eveniet, explicabo autem earum?</p>
							<ul>
								<li>Lorem ipsum dolor sit amet.</li>
								<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
								<li>Lorem ipsum dolor sit amet consectetur.</li>
								<li>Lorem ipsum dolor sit amet.</li>
							</ul>
						</div>
						<div class="location">Warsaw, Poland</div>
						<div class="price">42€ / day</div>
						<label for="card2" class="button return" aria-hidden="true"> <i class="fas fa-arrow-left"></i>
						</label>
					</div>
				</div>
			</div>
		</div>
		<div class="card">
			<input type="checkbox" id="card3" class="more">
			<div class="content">
				<div class="front" style="background-image: url('https://res.cloudinary.com/twenty20/private_images/t_standard-fit/v1521838903/photosp/1fa2bf52-6565-4313-aa08-fc6e2a1a9f70/1fa2bf52-6565-4313-aa08-fc6e2a1a9f70.jpg')">
					<div class="inner">
						<h2>Luxury property</h2>
						<div class="rating"> <i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
							<i class="fas fa-star"></i>
						</div>
						<label for="card3" class="button" aria-hidden="true">Details</label>
					</div>
				</div>
				<div class="back">
					<div class="inner">
						<div class="info"> <span>8</span>
							<div class="icon"> <i class="fas fa-users"></i>
								<span>people</span>
							</div>
						</div>
						<div class="info"> <span>7</span>
							<div class="icon"> <i class="fas fa-door-open"></i>
								<span>rooms</span>
							</div>
						</div>
						<div class="info"> <span>5</span>
							<div class="icon"> <i class="fas fa-bed"></i>
								<span>beds</span>
							</div>
						</div>
						<div class="info"> <span>2</span>
							<div class="icon"> <i class="fas fa-bath"></i>
								<span>baths</span>
							</div>
						</div>
						<div class="description">
							<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa libero totam nostrum consequatur autem quae provident quos alias fugit maxime nisi labore, temporibus tempore illo natus voluptates aliquam ipsum officia quasi placeat aut facilis laudantium nam!</p>
							<p>Quam, iusto.Neque ratione ut deserunt unde dicta nesciunt, repudiandae aspernatur explicabo numquam! Tenetur!</p>
						</div>
						<div class="location">Cracow, Poland</div>
						<div class="price">60€ / day</div>
						<label for="card3" class="button return" aria-hidden="true"> <i class="fas fa-arrow-left"></i>
						</label>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

CSS

@import 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700';
@import 'https://use.fontawesome.com/releases/v5.3.1/css/all.css';
 * {
	box-sizing: border-box;
}
body {
	margin: 0;
	background-color: #2c2d2e;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	font-family: 'Montserrat', sans-serif;
}
.wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
.card {
	width: 420px;
	height: 340px;
	margin: 1em;
	perspective: 1500px;
}
.card .content {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}
.more {
	display: none;
}
.more:checked ~ .content {
	transform: rotateY(180deg);
}
.front,
.back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	border-radius: 6px;
}
.front .inner,
.back .inner {
	height: 100%;
	display: grid;
	padding: 1.5em;
	transform: translateZ(80px) scale(0.94);
}
.front {
	background-color: #fff;
	background-size: cover;
	background-position: center center;
}
.front:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 6px;
	backface-visibility: hidden;
	background: linear-gradient(40deg, rgba(67, 138, 243, 0.7), rgba(255, 242, 166, 0.7));
}
.front .inner {
	grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
	justify-items: center;
}
.front h2 {
	grid-row: 2;
	margin-bottom: 0.3em;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: #fff;
	font-weight: 500;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.front .rating {
	grid-row: 3;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	display: flex;
	flex-flow: row nowrap;
}
.front .rating i {
	margin: 0 1px;
}
.back {
	transform: rotateY(180deg);
	background-color: #fff;
	border: 2px solid #f0f0f0;
}
.back .inner {
	grid-template-rows: 1fr 2fr 1fr 2fr 14fr 1fr 1fr;
	grid-template-columns: repeat(4, auto);
	grid-column-gap: 0.8em;
	justify-items: center;
}
.back .info {
	position: relative;
	display: flex;
	align-items: center;
	color: #355cc9;
	grid-row: 3;
}
.back .info:not(:first-of-type):before {
	content: '';
	position: absolute;
	left: -0.9em;
	height: 18px;
	width: 1px;
	background-color: #ccc;
}
.back .info span {
	font-size: 2em;
	font-weight: 700;
}
.back .info i {
	font-size: 1.2em;
}
.back .info i:before {
	background: linear-gradient(40deg, #355cc9, #438af3);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}
.back .info .icon {
	margin-left: 0.3em;
}
.back .info .icon span {
	display: block;
	margin-top: -0.25em;
	font-size: 0.8em;
	font-weight: 600;
	white-space: nowrap;
}
.back .description {
	grid-row: 5;
	grid-column: 1/-1;
	font-size: 0.86em;
	border-radius: 5px;
	font-weight: 600;
	line-height: 1.4em;
	overflow: auto;
	color: #355cc9;
	padding-right: 10px;
}
.back .location,
.back .price {
	font-weight: 600;
	color: #355cc9;
	grid-row: 1;
	font-size: 0.86em;
}
.back .location {
	grid-column: 1/3;
	justify-self: left;
}
.back .price {
	grid-column: 3/-1;
	justify-self: right;
}
.back .button {
	grid-column: 1/-1;
	justify-self: center;
}
.button {
	grid-row: -1;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	cursor: pointer;
	display: block;
	padding: 0 1.5em;
	height: 3em;
	line-height: 2.9em;
	min-width: 3em;
	background-color: transparent;
	border: solid 2px #fff;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	left: 50%;
	backface-visibility: hidden;
	transition: 0.3s ease-in-out;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.button:hover {
	background-color: #fff;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
	text-shadow: none;
	color: #355cc9;
}
.button.return {
	line-height: 3em;
	color: #355cc9;
	border-color: #355cc9;
	text-shadow: none;
}
.button.return:hover {
	background-color: #355cc9;
	color: #fff;
	box-shadow: none;
}
::-webkit-scrollbar {
	width: 5px;
}
::-webkit-scrollbar-track {
	background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
	background: #859ddf;
}
::-webkit-scrollbar-thumb:hover {
	background: #355cc9;
}

So this is how Clickable Flip Cards made with the help of Pure CSS looks like. Below is it’s Codepen. It was inspired by Kacper Parzęcki pens.

CodePen.

See the Pen Pure CSS clickable flip cards by Kamran Tahir (@Mah3svara) on CodePen.

unsplash-logoClifford Photography
0 CommentsClose Comments

Leave a comment