An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Some of Our Sources
- Simplebits
- Spoon Graphics
- Smashing Magazine
- Creative Curio
- Web Designer Depot
- Crazy Leaf Design
- Fudge Graphics
- Stylized Web
- CSS Tricks
- Spyre Studios
Help Webnuz
Referal links:
March 14, 2021 02:55 am GMT
Original Link: https://dev.to/stackfindover/awesome-css-card-hover-effects-34ng
Awesome CSS Card Hover Effects
Hello, guys in this tutorial we will create an awesome CSS card design using HTML and CSS
Common Query
- How to add a hover effect
- Card Hover Effects
- Html & CSS Tutorial
Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create an awesome CSS card design using HTML and CSS
First, we need to create three files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Awesome Hover Effect</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet"> </head> <body> <section class="container"> <div class="card_outer"> <div class="card"> <div class="content"> <h2 class="title">This is title</h2> <p class="copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <button class="btn">Read More</button> </div> </div> <div class="card"> <div class="content"> <h2 class="title">This is title</h2> <p class="copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <button class="btn">Read More</button> </div> </div> <div class="card"> <div class="content"> <h2 class="title">This is title</h2> <p class="copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <button class="btn">Read More</button> </div> </div> <div class="card"> <div class="content"> <h2 class="title">This is title</h2> <p class="copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <button class="btn">Read More</button> </div> </div> </div> </section> </body></html>Step:2
Then we need to add code for style.css which code I provide in the below screen.
* { padding: 0; margin: 0; box-sizing: border-box; --d: 700ms; --e: cubic-bezier(0.19, 1, 0.22, 1); font-family: 'Montserrat', sans-serif;}body { display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden;}.container { width: 90%; max-width: 1260px; margin: 0 auto;}.card_outer { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 20px;}.card { position: relative; display: flex; align-items: flex-end; overflow: hidden; padding: 1rem; width: 100%; min-height: 400px; text-align: center; color: #fff; background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);}.card:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 110%; background-size: cover; background-position: 0 0; transition: transform calc(var(--d) * 1.5) var(--e); pointer-events: none;}.card:after { opacity: 0; content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 200%; pointer-events: none; background-color: rgba(0, 0, 0, 0.5); transform: translateY(-50%); transition: transform calc(var(--d) * 2) var(--e);}.card:hover:after { opacity: 1; transition: opacity calc(var(--d) * 1.5) var(--e);}.card:nth-child(1):before { background-image: url(img-01.jpg);}.card:nth-child(2):before { background-image: url(img-02.jpg);}.card:nth-child(3):before { background-image: url(img-03.jpg);}.card:nth-child(4):before { background-image: url(img-04.jpg);}.content { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 1rem; transition: transform var(--d) var(--e); z-index: 1;}.content > * + * { margin-top: 1rem;}.title { font-size: 25px; font-weight: bold; line-height: 35px;}.copy { font-size: 15px; font-style: italic; line-height: 25px;}.btn { cursor: pointer; margin-top: 1.5rem; padding: 0.75rem 1.5rem; font-size: 0.65rem; font-weight: bold; letter-spacing: 0.025rem; text-transform: uppercase; color: white; background-color: black; border: none;}.btn:hover { background-color: #0d0d0d;}@media (hover: hover) and (min-width: 600px) { .card:after { transform: translateY(0); } .content { transform: translateY(calc(100% - 4.5rem)); } .content > *:not(.title) { opacity: 0; transform: translateY(1rem); transition: transform var(--d) var(--e), opacity var(--d) var(--e); } .card:hover, .card:focus-within { align-items: center; } .card:hover:before, .card:focus-within:before { transform: translateY(-4%); } .card:hover:after, .card:focus-within:after { transform: translateY(-50%); } .card:hover .content, .card:focus-within .content { transform: translateY(0); } .card:hover .content > *:not(.title), .card:focus-within .content > *:not(.title) { opacity: 1; transform: translateY(0); transition-delay: calc(var(--d) / 8); } .card:focus-within:before, .card:focus-within:after, .card:focus-within .content, .card:focus-within .content > *:not(.title) { transition-duration: 0s; }}Awesome CSS Card Hover Effects Video Output:
Awesome CSS Card Hover Effects Codepen Output:
We will update soon:)
Original Link: https://dev.to/stackfindover/awesome-css-card-hover-effects-34ng
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To