95+ CSS Cards - Free Code + Demos

Card interaction inspired by Natours project by Jonas Schmedtmann and his great Advanced CSS course.

I needed to make a card that showcased an entire photo on view. The challenge was I wanted social icons that held over the entire image. This is my solution, please ask any questions. I tried to make it easy for others to use.

Outcome of a box-shadow tutorial that will soon get published on fossheim.io (early access through Patreon).

Outcome of a box-shadow tutorial that will soon get published on fossheim.io (early access through Patreon).

I was inspired by Steam application home-page on Desktop. Tried to create the feeling of a 3d flip on the first row.

Introduction into CSS animation with transition property. This is where the fun begin into playing some CSS properties. Any website front end development project that you have, you always have that parts that you want to have a nice any good looking animation effects. Bootstrap 4 Cards. ...

Read More

This is some kind of profile card. The Hire me button has a moving gradient hover animation

Hacking together a solution to show part of an element in a card as a default state, lining up the element headline across each card and then animating the element to the center of its parent element

Messing around for a (will-writing) client with css custom properties

This is a simple card with shadow.

So I noticed the new library view on Steam has some cool game hover effects. So I thought I'd try create something similar in CSS.

A simple self expanding info card using very basic tools and transitions

A simple and a little bit colorful design concept of a profile card. This is my first time to use the Stylus CSS preprocessor. This challenge was the best opportunity for me to try it (I just coded it after I forked, without changing the preprocessor/s).

This are some game-based cards made for the Codepen challenge. It was kinda fun to make this ones! Feel free to fork this and make your own set of cards!

CSS Clip path Card Hover Effects | Only Using HTML & CSS

This is a module for a featured news section of a gaming website. It contains 3 articles and a call-to-action for a signup form.

A quick little animation with a material-design card.

Using Vue.Js, Vue Carouse by ssense, and Bootstrap Vue

Playing with Google Design card effect.

Responsive eCommerce product layout using CSS Grid -- Images taken from threadless.com -- Background generated using the amazing http://www.patternify.com/

A digital Card profile in wich resume alla your essential professional panorama and easily share

Card transitions!

Item description on hovering the card.

clean card hover effect

Expand/collapse cards with text cut according to the shape of the label. Using CSS clip-path to create a reveal effect on the text hidden behind vintage labels. Labels from freepik.com - “Logo vector created by Freepik”

3 cards that have a hovering effect, when a mouse hovers over one of the cards it stands up and for user to read clearly

abusing gradients like it's my job. (it's not.) (but it could be.)

Same height cards with hover effect (#CodePenChallenge )

On hover, an excerpt pops up into the card. It doesn't matter how many lines the title or the excerpt is, it will display it all as long as their combined height doesn't exceed the height of the card. Hover effect behaves weird on handheld devices so I disabled hover effects on viewports l...

Read More

CSS Grid layout exercise using this Dribbble shot: https://dribbble.com/shots/3104643-Fire-Ice-Website/attachments/655216

Card animation with CSS and HTML and some click events, CSS variables

Dribbble shot conversion of Nancy Nguyen titled Article Card Hover Interaction.

A little responsive kajigger that uses a bunch of new CSS tech. CSS Variables CSS Grid Layout CSS Flexbox Based on Product Web Design by Aditya Khakhria Text is from Beautiful Earth (what a marvelous thing) by Kathye D. Perry

Hover card to reveal social media links.

Card animation New York City based on dribbble https://dribbble.com/shots/3127773-Event-Card

"Hover the rainbow" is a simple hover effect for card and box element, 100% CSS! https://dribbble.com/shots/1836986-Hover-The-Rainbow

The great debate 😅 Not exactly a blog card but this is what sprang to mind first. I'll try get some blog cards done. Click to toggle choice of order! Best viewed in full screen

Just some polaroid memories using css custom properties, filters and transitions.

Responsive version of a product page with elements that overhang the cards they're on. Design inspiration from: https://dribbble.com/shots/2372097-Fun-with-mockups

I've been procrastinating like a fiend lately, so I came up with any idea... One Design, One Week. Every week I will post a new design, so keep a look out!

Just playing around with more CSS transitions and hover effects.

That just some fun in material design. Inspired by the really talented : Magnigenie ! https://dribbble.com/shots/2442471-Material-Blog-Card

Playing around with css grid, flexbox, clip-path, and radial-gradient Recreating the business card template as found here: https://novadonna.me/product/business-card-template-designs-pop-geometric/

About: This is an online version of my business card. Feel free to suggest improvements. Contribution & Suggestions You can usually reach me on Twitter. Want to build cool stuff? I am always looking forward to meeting new people. If you want to work with me or just want to connect, me...

Read More

feat. direction aware CSS hovers. Submission for #CodePenChallenge. Use-case data from @NASA homepage. VR inspired layout.

Example testimonials that can be used on a website. Includes a quote, picture place, name, and location.

A simple card with an image, text and description, which rotates and moves upwards on hover.