Blog Card using HTML and CSS

Detail Hovering Card

Table of Contents

Introduction of Blog Card Html Css

Here today, you will see how to make a Blog Card Html Css with a hovering effect using HTML and CSS. In this card, there will be some information or details about anything. When the user hovers on the card, there will be some change in the card, as you can see in the result. You might have seen this type of card on many websites, but this is something different from others. Now, without wasting any time, let’s start making this card using the simple code, which is not very complicated in terms of HTML and CSS. There is only a basic concept of HTML and CSS.

HTML

First, we will create the structure of the Blog Card Html Css with the help of HTML. In this first step, we will make the parent div, in which all the cards will be written. Now we will make four divs for the card, and in the divs there will be a heading of detail in the heading tag, images in the img tag (optional). Some paragraphs about the heading in the p tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Detail Card</title>
</head>
<body>
    <body>
        <div class="container">
          <div class="cards">
            <div class="card card-one">
              <h2 class="card-title">The Avengers</h2>
              <p class="date">27 April 2012</p>
              <p class="description">Marvel's The Avengers is a 2012 American superhero film based on the Marvel Comics superhero team of the same name</p>
            </div>
            
            <div class="card card-two">
              <h2 class="card-title">Avengers: <br>Age of Ultron</h2>
              <p class="date">May 1, 2015</p>
              <p class="description">Avengers: Age of Ultron is a 2015 American superhero film based on the Marvel Comics superhero team the Avengers</p>
            </div>
            
            <div class="card card-three">
              <h2 class="card-title">Avengers: Infinity War</h2>
              <p class="date">27 April 2018</p>
              <p class="description">Avengers: Infinity War is a 2018 American superhero film based on the Marvel Comics superhero team the Avengers</p>
            </div>
            
            <div class="card card-four">
              <h2 class="card-title">Avengers: Endgame</h2>
              <p class="date">26 April 2019</p>
              <p class="description">Avengers: Endgame is a 2019 American superhero film based on the Marvel Comics superhero team the Avengers</p>
            </div>
          </div>
        </div>
      </body>
</body>
</html>

CSS

After making the structure of the hovering Blog Cards, it’s time to give it some styling and give it a hovering effect with the help of CSS (an external stylesheet attached to the HTML file). In this first step, we will make the background black and then take the parent div of the card in the center of the screen.

Now we will come towards the design of Blog Card Html Css,  in which we will give colour to the text of e heading, p paragraph, and background of the card. We will also give styling to the borders of the card. Now in the hovering section, the card will be a little tilted to the left by using the translate transform property in CSS. When the user hovers on that particular card, the card will come to its real position.

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700&display=swap');

html {
  box-sizing: border-box;
  font-size: 100%;
}

*,*::before,*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}


body {
  height: 100vh;
  background-color: #151515;
  font-family: 'Source Code Pro', monospace;
}

.container {
  height: 100%;
  width: 100%;
  padding: 1rem 0;
  display: grid;
  place-content: center;
  
  .cards {    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    pointer-events: none;
  }
  
  .card {
    max-width: 15rem;
    color: #ffffffda;
    padding: 1.5rem;
    background-color: #202022;
    
    pointer-events: auto;
    
    transform: scale(1);
    opacity: 1;
    transition: all 150ms ease-in-out; 
    
    display: flex;
    flex-direction: column;
    
    .card-title {
      position: relative;
      
      &::before {
        content: "";
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
        box-shadow: inset 0 0 3px #86fc8c;
        background-color: transparent;
        
        position: absolute;
        right: 0;
      }
    }
    
    .date {
      color: #86fcad;
      font-size: 0.85rem;
      margin-bottom: 1.5rem;
    }
    
    .description {
      font-size: 0.9rem;
    }
    
    &:nth-child(even) {
      transform: translateY(8px);
    }
    
    &:nth-child(n) {
      transform: rotate(-5deg);
    }
  }
}

.cards:hover > .card:hover {
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  z-index: 10;
}
.cards:hover > .card:not(:hover) {
  opacity: 0.5;
}

Output of Blog Card Html Css

Finally, we made the hovering Blog Card Html Css by following the simple code step by step. This is very useful, as you can make this type of card to store some information. If you want the source code, then click on the download button given below.

Blog Card using HTML and CSS

For more explanation, click on the link given below to watch the video.

You can also check:

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us

Latest Posts

Quick Links