Skip to content

11 CSS Card Hover Effects

Collection of freeĀ HTML and CSS card hover effect code examples for your inspiration.

House of Cards

House of CardsCode & Demo

Playing around with cool CSS features like Custom Properties, Filters, Clipping and … Includes 15 styles of hover Effects.

Product Card

Product Card Hover EffectCode & Demo

On hover, it slides up the Product options and overlay the product image with smooth animations.

Card Flip

Card effect on hoverCode & Demo

Cards will flip horizontally and vertically on hover.

Info Card

info card hover effectCode & Demo

Created by Rafaela Lucas. It’s fully responsive and on hover, it displays info text and removes the gradient of the icon.

EC card hover

EC card hover effectCode & Demo

On hover, the icon background takes over the full card and changes the shadow color as well. Created by Jorge Sanes.

Card transitions

Card transitionsCode & Demo

On hover, the card will pushed down and slides on top of card info. Created by Angel Davcev.

Floating Card

Floating card effectCode & Demo

A floating card turns on hover, Created by yash arora.

Card Hover

card hover effectCode & Demo

Oh, hover It slides in shapes and Social icons, includes font awesome icons but unfortunately its not responsive. Created by Chhiring.

Jelly Card

Jelly card effectCode & Demo

A jelly effect in a card on hover slides up the card content.

Material Card with Animated Featured Image

Material Card with Animated Featured ImageCode & Demo

Experiment with material design. Animates the featured image and headline and adds button when hovered.

Simple Card

Simple card effectCode & Demo

Simple card hover effect in HTML and CSS. Created by YaroslavW.