Flip Card on Hover

flipping card
How to make simple card with flipping effect when hovers over it.
GIF flip cards on hover

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*/
}

red square

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*/
}

yellow score

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>

image

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>

image

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 flat flipping card
Disable backface visibility :
.flip-card .front, .flip-card .back {
	/*..*/
	backface-visibility: hidden;
}
GIF flat flipping card
Make the flip animation look 3D :
.flip-card {
	/*..*/
	perspective: 100vw;
}
GIF 3d flipping card

Style text

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

text in grey square

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

text in grey square

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

text at centre in grey square

Flip text on hover

Set the text intially set at the back side of the card :
.flip-card .back {
	/*..*/
	transform: rotateY(180deg);
}

image

.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 flipping card

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*/
}

image with border

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>

vertically stacked images

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

horizontally stacked images

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%;
    }
}

different number of cards on diferent screen data-lazy-sizes

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%*/
	}
}

different number of cards on diferent screen data-lazy-sizes

Full code is available here.
Issue : Don’t know how to use overflowing text in card. Use less text so that it won’t overflow out of the card.

Leave a Reply

Your email address will not be published. Required fields are marked *