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 q…


This content originally appeared on DEV Community and was authored by Stackfindover

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>

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:)


This content originally appeared on DEV Community and was authored by Stackfindover


Print Share Comment Cite Upload Translate Updates
APA

Stackfindover | Sciencx (2021-03-14T02:55:18+00:00) Awesome CSS Card Hover Effects. Retrieved from https://www.scien.cx/2021/03/14/awesome-css-card-hover-effects/

MLA
" » Awesome CSS Card Hover Effects." Stackfindover | Sciencx - Sunday March 14, 2021, https://www.scien.cx/2021/03/14/awesome-css-card-hover-effects/
HARVARD
Stackfindover | Sciencx Sunday March 14, 2021 » Awesome CSS Card Hover Effects., viewed ,<https://www.scien.cx/2021/03/14/awesome-css-card-hover-effects/>
VANCOUVER
Stackfindover | Sciencx - » Awesome CSS Card Hover Effects. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/14/awesome-css-card-hover-effects/
CHICAGO
" » Awesome CSS Card Hover Effects." Stackfindover | Sciencx - Accessed . https://www.scien.cx/2021/03/14/awesome-css-card-hover-effects/
IEEE
" » Awesome CSS Card Hover Effects." Stackfindover | Sciencx [Online]. Available: https://www.scien.cx/2021/03/14/awesome-css-card-hover-effects/. [Accessed: ]
rf:citation
» Awesome CSS Card Hover Effects | Stackfindover | Sciencx | https://www.scien.cx/2021/03/14/awesome-css-card-hover-effects/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts