DEV Community

Cover image for Awesome CSS Card Hover Effects
Stackfindover
Stackfindover

Posted on • Updated on

Awesome CSS Card Hover Effects

Hello, guys in this tutorial we will create an awesome CSS card design using HTML and CSS

Common Query

  1. How to add a hover effect
  2. Card Hover Effects
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Awesome CSS Card Hover Effects Video Output:

Awesome CSS Card Hover Effects Codepen Output:

Demo Link:Codepen

Top comments (4)

Collapse
 
pai profile image
Pai

Where is a demo link?

Collapse
 
stackfindover profile image
Stackfindover

Demo link updated :)

Collapse
 
florincornea profile image
Cornea Florin

Nice job!, although it would nice to have some explanation for the CSS :D

Collapse
 
stackfindover profile image
Stackfindover

yeah sure, I will try to explain CSS in my all upcoming post.
Thanks for the suggestion buddy :)