Flip Card on Hover

zFunx CSS Tricks May 18, 2018 | 0

How to make simple card with flipping effect when hovers over it.

GIF

Structure of Card

We need a container which will hold two divs, one for front and another for back of the card :

<div class="flip-card">
	<div class="front">
	</div>
	<div class="back">
	</div>
</div>

Set the dimension of the container :

.flip-card {
	width: 25%;
	height: 200px;
	background: red;/*for testing, we will remove it later*/
}

Make those two divs inside the container overlap each other :

.flip-card {
	/*..*/
	position: relative;
}

.flip-card .front, .flip-card .back {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: yellow;/*for testing, we will remove it later*/
}

Set an image to the front of the card :

.flip-card .front, .flip-card .back {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	/*background: yellow;*//*remove it*/
	background-size: cover;/*and add this*/
}

<div class="flip-card">
	<div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1NDVf?inline=1)">
	</div>
	<div class="back">
	</div>
</div>

Set the text :

<div class="flip-card">
	<div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1NDVf?inline=1)">
	</div>
	<div class="back">
	    Lorem ipsum
	</div>
</div>

Flip Image on hover

Add rotation animation on hover :

.flip-card {
	width: 25%;
	height: 200px;
	/*background: red;*//*remove it*/
	position: relative;
}

.flip-card .front, .flip-card .back {
	/*..*/
	transition: .3s;
}

.flip-card:hover .front {
	transform: rotateY(180deg);
}

GIF

Disable backface visibility :

.flip-card .front, .flip-card .back {
	/*..*/
	backface-visibility: hidden;
}

GIF

Make the flip animation look 3D :

.flip-card {
	/*..*/
	perspective: 100vw;
}

GIF

Style text

.flip-card .back {
	background: #333;
	color: #fff;
	overflow: hidden;
}

Set padding and change font :

.flip-card .back {
	/*..*/
	padding: 8px;
	font-family: Arial, Helvetica, sans-serif;
}

Align text at center :

.flip-card .back {
	/*..*/
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
}

Flip text on hover

Set the text intially set at the back side of the card :

.flip-card .back {
	/*..*/
	transform: rotateY(180deg);
}

.flip-card:hover .back {
	transform: rotateY(360deg);
}

GIF

Add scale animation (optional)

.flip-card .back {
	transform: rotateY(180deg) scale(0.5);
}

.flip-card:hover .front {
	transform: rotateY(180deg) scale(0.5);
}

.flip-card:hover .back {
	transform: rotateY(360deg) scale(1);
}

GIF

Add some more style (optional)

.flip-card .front,
.flip-card .back {
	/*..*/
	border: 2px solid #333;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;/*so that border does not increase card's size*/
}

Make cards more responsive

First add some more cards :

<div class="flip-card">
    <div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1NDVf?inline=1)">
    </div>
    <div class="back">
        Lorem ipsum
    </div>
</div>

<div class="flip-card">
    <div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1MTZf?inline=1)">
    </div>
    <div class="back">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat, enim quis bibendum fringilla, elit erat auctor
        quam, at malesuada neque urna sed arcu
    </div>
</div>

<div class="flip-card">
    <div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1MDhf?inline=1)">
    </div>
    <div class="back">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat, enim quis bibendum fringilla, elit erat auctor
        quam, at malesuada neque urna sed arcu. Nam iaculis scelerisque sem, vitae laoreet justo pretium id. Cras convallis
        gravida elit nec dapibus. Nulla nec finibus sem, non iaculis risus
    </div>
</div>

<div class="flip-card">
    <div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1MDZf?inline=1)">

    </div>
    <div class="back">
        Lorem ipsum
    </div>
</div>

Align them horizontally :

.flip-card {
	/*..*/
	float: left;
}

Show different number of cards on different sizes of page :

.flip-card {
	width: 50%;
	/*..*/
}

@media (min-width: 600px) and (max-width: 992px) {
    .flip-card {
        width: 33.333%;
    }
}

@media (min-width: 992px) {
    .flip-card {
        width: 25%;
    }
}

Add margins :

.flip-card {
	width: 48%;
	margin: 1%;
	/*width + margin-left + margin-right = 50%*/
	/*..*/
}

@media (min-width: 600px) and (max-width: 992px) {
	.flip-card {
		width: 31%;
		margin: 1.16%;
		/*width + margin-left + margin-right = 33.33%*/
	}
}

@media (min-width: 992px) {
	.flip-card {
		width: 23%;
		margin: 1%;
		/*width + margin-left + margin-right = 25%*/
	}
}