How to Create or Design Animated Cards with HTML & CSS? See This Pure CSS Card With Hover Effect.
Maybe you know what is a card on the webpage. If you don’t know about this, Mostly cards are used to organize listings of blog posts, products, services, etc. Section with border and content and take margin from another one they are cards.
Previously I had shared Bootstrap Pricing Table, These are an example of what is a card. But I had created that program using JS and Bootstrap. But today I am sharing card in pure CSS with animation effect on the mouse hover. If are you a beginner then you will learn what is CSS variable and how to use var.
This is a very simple & clean program easy to understand for beginners also. The Pure CSS Card With Hover Effect program has an attractive look, you can use it on your website. We can able to create this type of program because of CSS3 power. This program is a good UI design in my opinion.
If you now thinking how its program actually looks, then you can see this preview given here below.
Preview Of Animated Cards Design
See this video preview for getting an idea of how this program looks like.
Now you can see how this program looks visually. If you like this program, then get the source code of it.
You May Also Like:
Pure CSS Card Source Code
Before sharing source code, I want to say about this program. As you can see in the preview these effects are all built-in CSS. For one card I had created 3 divs. First for main div, second for image and third for text. I had put <a>
tag inside div, there you can put your own link. For color, htmlmargin, border-radius I created CSS var
variables.
Using variable you don’t have put to same value every time, just place variable there. For creating this program, you have to create only 2 files. One for HTML & one for CSS. Follow the steps to create this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>CSS Filter Cards</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet"> </head> <body> <section class="hero-section"> <div class="cgrid"> <a class="card" href="#"> <div class="cardbg" style="background-image: url(https://images.pexels.com/photos/1372972/pexels-photo-1372972.jpeg?cs=srgb&dl=close-up-coffee-contemporary-1372972.jpg&fm=jpg)"></div> <div class="ccontent"> <h3 class="textcard">Graphic Design</h3> </div> </a> <a class="card" href="#"> <div class="cardbg" style="background-image: url(https://images.pexels.com/photos/943096/pexels-photo-943096.jpeg?cs=srgb&dl=code-coding-connection-943096.jpg&fm=jpg)"></div> <div class="ccontent"> <h3 class="textcard">Web Development</h3> </div> </a> <a class="card" href="#"> <div class="cardbg" style="background-image: url(https://images.pexels.com/photos/218717/pexels-photo-218717.jpeg?cs=srgb&dl=blur-close-up-connection-218717.jpg&fm=jpg)"></div> <div class="ccontent"> <h3 class="textcard">SEO Tutorials</h3> </div> </li> <a class="card" href="#"> <div class="cardbg" style="background-image: url(https://images.pexels.com/photos/821749/pexels-photo-821749.jpeg?cs=srgb&dl=camera-close-up-device-821749.jpg&fm=jpg)"></div> <div class="ccontent"> <h3 class="textcard">About Photography</h3> </div> </a> <div> </section> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
/* code by webdevtrick ( https://webdevtrick.com ) */ :root{ --background-dark: #2d3548; --text-light: rgba(255,255,255,0.6); --text-lighter: rgba(255,255,255,0.9); --spacing-s: 8px; --spacing-m: 16px; --spacing-l: 24px; --spacing-xl: 32px; --spacing-xxl: 64px; --width-container: 1200px; } *{ border: 0; margin: 0; padding: 0; box-sizing: border-box; } html{ height: 100%; font-family: 'Reem Kufi', sans-serif; font-size: 16px; } body{ height: 100%; } .hero-section{ align-items: flex-start; background-color: darkturquoise; display: flex; min-height: 100%; justify-content: center; padding: var(--spacing-xxl) var(--spacing-l); } .cgrid{ display: grid; grid-template-columns: repeat(1, 1fr); grid-column-gap: var(--spacing-l); grid-row-gap: var(--spacing-l); max-width: var(--width-container); width: 100%; } @media(min-width: 540px){ .cgrid{ grid-template-columns: repeat(2, 1fr); } } @media(min-width: 960px){ .cgrid{ grid-template-columns: repeat(4, 1fr); } } .card{ list-style: none; position: relative; } .card:before{ content: ''; display: block; padding-bottom: 150%; width: 100%; } .cardbg{ background-size: cover; background-position: center; border-radius: var(--spacing-l); bottom: 0; filter: brightness(0.75) saturate(1.2) contrast(0.85); left: 0; position: absolute; right: 0; top: 0; transform-origin: center; trsnsform: scale(1) translateZ(0); transition: filter 200ms linear, transform 200ms linear; } .card:hover .cardbg{ transform: scale(1.10) translateZ(0); } .ccontent{ left: 0; padding: var(--spacing-l); position: absolute; top: 0; } .textcard{ color: var(--text-lighter); font-size: 1.9rem; text-shadow: 2px 2px 20px rgba(0,0,0,0.2); line-height: 1.4; word-spacing: 100vw; } |
That’s It. Now you have successfully created Pure CSS Card With Hover Effect or Animated Card Design. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
This is really really so cool an awesome.. it’s really help me a lot.. thanks a lot for sharing.. your all article are truly so useful an helpful..
Keep sharing this kinda information.. thanks again..
Thank you very much, Stay connected for daily updates.
Tks, beautiful tutorial. Hugs from Brazil đŸ™‚
a shit.should have the start css code