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 :

Set the dimension of the container :

red square

Make those two divs inside the container overlap each other :

yellow score

Set an image to the front of the card :


Set the text :


Flip Image on hover

Add rotation animation on hover :

GIF flat flipping card

Disable backface visibility :

GIF flat flipping card

Make the flip animation look 3D :

GIF 3d flipping card

Style text

text in grey square

Set padding and change font :

text in grey square

Align text at center :

text at centre in grey square

Flip text on hover

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



Add scale animation (optional)

GIF flipping card

Add some more style (optional)

image with border

Make cards more responsive

First add some more cards :

vertically stacked images

Align them horizontally :

horizontally stacked images

Show different number of cards on different sizes of page :

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

Add margins :

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.