Codepen card design using Html | CSS | JS

Codepen card design using Html | CSS | JS

Hello! In this blog we will create a Codepen like card design section using Html, Css and javaScript.

To achieve this responsive design we have used css grid and flexbox properties that makes our design work fine in different screen sizes. 

We also used hover effects which shows three button at the bottom and transforms the card width when mouse enters.

References:

Images: pexels.com 

Icons: fontawesome.com/icons

Please see below code and get started!!

HTML Code

<div class="container">
  <div class="cards">
    <div class="card">
      
      <div class="card-header">
        <img src="https://images.pexels.com/photos/2775196/pexels-photo-2775196.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
      </div>
    
      <div class="card-body">
        <div class="avatar">
          <img src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        </div>
        <div class="content">
          <h1 class="card-title">Bootstrap 3 - Layout</h1>
          <p class="user">Angela Andrew</p>
        </div>
      </div>
      
      <div class="card-footer">
        <div class="tag likes">
          <span class="icon"><i class="fas fa-heart"></i></span>
          <span class="count">100</span>
        </div>
        <div class="tag comments">
          <span class="icon"><i class="fas fa-comment-alt"></i></span>
          <span class="count">65</span>
        </div>
        <div class="tag view">
          <span class="icon"><i class="fas fa-eye"></i></span>
          <span class="count">4580</span>
        </div>
      </div>
      
    </div>
    
    <div class="card">
      
      <div class="card-header">
        <img src="https://images.pexels.com/photos/220429/pexels-photo-220429.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
      </div>
    
      <div class="card-body">
        <div class="avatar">
          <img src="https://images.pexels.com/photos/1310522/pexels-photo-1310522.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        </div>
        <div class="content">
          <h1 class="card-title">Responsive Navbar design</h1>
          <p class="user">Alena max</p>
        </div>
      </div>
      
      <div class="card-footer">
        <div class="tag likes">
          <span class="icon"><i class="fas fa-heart"></i></span>
          <span class="count">100</span>
        </div>
        <div class="tag comments">
          <span class="icon"><i class="fas fa-comment-alt"></i></span>
          <span class="count">65</span>
        </div>
        <div class="tag view">
          <span class="icon"><i class="fas fa-eye"></i></span>
          <span class="count">4580</span>
        </div>
      </div>
      
    </div>
    
    <div class="card">
      
      <div class="card-header">
        <img src="https://images.pexels.com/photos/1227511/pexels-photo-1227511.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
      </div>
    
      <div class="card-body">
        <div class="avatar">
          <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        </div>
        <div class="content">
          <h1 class="card-title">Button hover effect Html and Css</h1>
          <p class="user">John Doe</p>
        </div>
      </div>
      
      <div class="card-footer">
        <div class="tag likes">
          <span class="icon"><i class="fas fa-heart"></i></span>
          <span class="count">100</span>
        </div>
        <div class="tag comments">
          <span class="icon"><i class="fas fa-comment-alt"></i></span>
          <span class="count">65</span>
        </div>
        <div class="tag view">
          <span class="icon"><i class="fas fa-eye"></i></span>
          <span class="count">4580</span>
        </div>
      </div>
      
    </div>
    
  </div>
</div>

CSS Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: .5s ease;
}

body {
  min-height: 100vh;
  font-family: verdana;
  background: #111;
  color: #fff
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover
}

.container {
  position: relative;
  margin: 0 auto;
  width: 1100px;
  max-width: 100%;
  padding: 2rem 1rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .5rem;
}

.card {
  position: relative;
  padding: 1rem;
  min-width: 300px;
}

.card::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #1e1f26;
  z-index: -1;
  border-radius: 10px;
  transform-origin: right;
  transform: scale(0.9, .8);
  transition: .5s
}

.card:hover::before {
  transform: scale(1)
}

/* header */

.card-header {
  overflow: hidden;
  width: 100%;
}

.card-header img {
  border-radius: 10px;
}

/* body */
.card-body {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
  margin-bottom: .5rem;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 5px;
}

.avatar img {
  border-radius: 5px;
}

.content {
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 1rem;
}

.user {
  margin-top: auto;
  font-size: .9rem;
  color: hsl(0, 0%, 55%)
}

/* footer */
.card-footer {
  display: flex;
  gap: .25rem;
  
}

.tag {
  transform: translateY(-10px);
  opacity: 0;
  background: #000;
  padding: .25rem .5rem;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer
}

.card:hover .tag:nth-child(1) {
  transition-delay: .2s
}

.card:hover .tag:nth-child(2) {
  transition-delay: .1s
}

.card:hover .tag:nth-child(3) {
  transition-delay: 0s
}

.card:hover .tag {
  transform: translateY(0);
  opacity: 1;
}

JavaScript Code

const title = document.querySelectorAll(".card-title")

// show substring title if title length is greater than 25
title.forEach(t => {
  let text = t.innerText
  t.innerText = text.length>25 ? text.substring(0, 24)+"...":text
})

That is all! Thank you to visit my blog:)

Code by: Altaf Alam Shaikh