CSS Card Hover Effects | Html CSS

May 22, 2021

Rahul

Hello guys, In this video you will learn how to create card hover effects using HTML and CSS.

Card hover effects full source code

First, we need to create two files index.html and style.css then we need to do code for it.

See also: Profile card design HTML & CSS

Step:#1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Cool post Hover Animaton</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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>

<body>
  <div class="post-outer">
    <div class="post">
      <div class="post-img"></div>
      <a href="#" class="post-link">
        <div class="post-img-hovered"></div>
      </a>

      <div class="post-info">
        <div class="post-about">
          <a href="#" class="post-cat">HTML</a>
          <div class="post-time">03/12/2021</div>
        </div>
        <h1 class="heading">What is JavaScript</h1>
        <p class="post-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <div class="post-creator"><strong>By</strong> <span>Rahul Jangid</span></div>
      </div>
    </div>
  </div>
</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;
  font-family: 'IBM Plex Sans', sans-serif;
}

html,
body {
  height: 100%;
  background: #363636;
}

.post-outer {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in-out;
}

.post {
  position: relative;
  width: 285px;
  min-width: 285px;
  background: #fff;
  transition: all 0.3s ease-in-out;
  border: 10px solid #eee;
  border-radius: 10px;
}

.post-img {
  width: 100%;
  height: 200px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  visibility: hidden;
}

.post-img-hovered {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  --post-img-hovered-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  transition: all 0.3s ease-in-out;
}

.post-info {
  position: relative;
  padding: 0.75rem 1.25rem;
  transition: all 0.2s ease-in-out;
}

p.post-desc {
  font-size: 15px;
}

.post-about {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  transition: all 0.2s ease-in-out;
}

.heading {
  font-size: 1.5rem;
  padding-bottom: 0.75rem;
  transition: all 0.35s ease-in-out;
  z-index: 10;
}

.post-creator {
  padding: 0.75rem 0 0.75rem 0;
  transition: all 0.25s ease-in-out;
}

.post-img,
.post-img-hovered {
  background-image: var(--post-img-hovered-overlay), url(javascript.jpg);
}

.post:hover {
  cursor: pointer;
  transform: scale(1.025);
  box-shadow: 0 15px 30px rgb(255 252 239 / 10%), 0 15px 30px rgb(0 0 0 / 7%);
}

.post:hover .post-img-hovered {
  height: 100%;
  --post-img-hovered-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
}

.post:hover .post-about,
.post:hover .post-creator {
  opacity: 0;
}

.post:hover h1.heading,
.post:hover .post-desc {
  color: #fff;
  transform: translate(0, 40px);
}

.post-cat {
  width: 60px;
  max-width: 100px;
  padding: 0.2rem 0.5rem;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  background: #505f79;
  color: #fff;
  text-decoration: unset;
}

YouTube video output: Watch Now

We hope you liked this article. You should definitely keep your thoughts about it in the comment below and share this article with your friends.

Leave a Comment Cancel reply