Blog Card Grid Css

Blog Card Grid With Hover Effect

Table of Contents

Introduction of Blog Card Grid Css

Hello everyone! We are today presenting to you our new project, which is the Blog Card Grid Css. Which was made with the help of HTML and CSS. There is a hovering effect on that card. In this card, there will be three cards in which some information will be written, and a button will also be given. Before the card section, there will be numbers written above the cards. On the card there will be a button. When the user hovers over one particular card. The background image will hide, the background will be covered with white, and all the text’s color will change.

Now let’s start making this amazing project by using the simple and easy code of HTML (Hyper Text Markup Language) and CSS (Cascading Stylesheet). The code will not be very complicated, so everyone can understand it without any problem. If you’ll have any doubt, you can contact us through the details given in the footer of the page.

HTML (Hypertext Markup Language)

First, we will create the structure of this project with the help of HTML. We will give the title of the project in the title tag. We will move toward the main content of the page. In which we will make a parent div that will contain all the cards and three child divs for three cards.

In every child div, we will make a div for numbering the card and an anchor tag. This tag, we will write all the content of the card. In this tag, we will give an image in the style tag. Make a div in which there will be a heading in the h1 tag. Some sentences about this in the p tag.

There will be some other divs for the date and tags used in the card. We will copy the content of the first page and paste it in another two divs.

<!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>Document</title>
</head>
<body>
  
      <section class="cards-wrapper">
        <div class="card-grid-space">
          <div class="num">01</div>
          <a class="card" href="https://codetheweb.blog/2017/10/06/html-syntax/" style="--bg-img: url(https://wallpapers.com/blog/wp-content/uploads/2023/06/Web-development-concept-with-person-using-a-laptop-computer.jpeg)">
            <div>
              <h1>HTML Syntax</h1>
              <p>The syntax of a language is how it works. How to actually write it. Learn HTML syntax…</p>
              <div class="date">6 Oct 2017</div>
              <div class="tags">
                <div class="tag">HTML</div>
              </div>
            </div>
          </a>
        </div>
        <div class="card-grid-space">
          <div class="num">02</div>
          <a class="card" href="https://codetheweb.blog/2017/10/09/basic-types-of-html-tags/" style="--bg-img: url('https://previews.123rf.com/images/melpomen/melpomen2003/melpomen200300471/141873406-web-development-concept-with-blurred-city-abstract-lights-background.jpg')">
            <div>
              <h1>Basic types of HTML tags</h1>
              <p>Learn about some of the most common HTML tags…</p>
              <div class="date">9 Oct 2017</div>
              <div class="tags">
                <div class="tag">HTML</div>
              </div>
            </div>
          </a>
        </div>
        <div class="card-grid-space">
          <div class="num">03</div>
          <a class="card" href="https://codetheweb.blog/2017/10/14/links-images-about-file-paths/" style="--bg-img: url('https://png.pngtree.com/thumb_back/fh260/background/20231002/pngtree-illustration-of-a-3d-render-showcasing-a-concept-of-web-ui-image_13584942.png')">
            <div>
              <h1>Links, images and about file paths</h1>
              <p>Learn how to use links and images along with file paths…</p>
              <div class="date">14 Oct 2017</div>
              <div class="tags">
                <div class="tag">HTML</div>
              </div>
            </div>
          </a>
        </div>
        <!-- https://images.unsplash.com/photo-1520839090488-4a6c211e2f94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=38951b8650067840307cba514b554ba5&auto=format&fit=crop&w=1350&q=80 -->
      </section>
</body>
</html>

CSS (Cascading Stylesheet)

After making the structure of this Blog Card Grid Css. We will give it some styling with the help of CSS . In this, we will first take the parent div to the center of the screen. We will give the display flex property to the parent div so the child elements will come in a row. Then we will adjust the size and position of the cards. Then we will give styling to the content written on the card, like color and font size,  and set their positions.

Now we will give it a hovering effect, in which when the user hovers on one particular card. The background image will cover the white background, which can be set using the before property in the card’s div. The color of all the text written on the card will also change after hovering. This will happen with some transitivity.

@import url('https://fonts.googleapis.com/css?family=Heebo:400,700|Open+Sans:400,700');

:root {
  --color: #3c3163;
  --transition-time: 0.5s;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Open Sans';
  background: #000000;
}

a {
  color: inherit;
}

.cards-wrapper {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 4rem;
  padding: 4rem;
  margin: 0 auto;
  width: max-content;
}

.card {
  font-family: 'Heebo';
  --bg-filter-opacity: 0.5;
  background-image: linear-gradient(rgba(0,0,0,var(--bg-filter-opacity)),rgba(0,0,0,var(--bg-filter-opacity))), var(--bg-img);
  height: 20em;
  width: 15em;
  font-size: 1.5em;
  color: white;
  border-radius: 1em;
  padding: 1em;
  /*margin: 2em;*/
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 5em -1em black;
  transition: all, var(--transition-time);
  position: relative;
  overflow: hidden;
  border: 6px solid #ccc;
  text-decoration: none;
}

.card:hover {
  transform: rotate(0);
}

.card h1 {
  margin: 0;
  font-size: 1.5em;
  line-height: 1.2em;
}

.card p {
  font-size: 0.75em;
  font-family: 'Open Sans';
  margin-top: 0.5em;
  line-height: 2em;
}

.card .tags {
  display: flex;
}

.card .tags .tag {
  font-size: 0.75em;
  background: rgba(255,255,255,0.5);
  border-radius: 0.3rem;
  padding: 0 0.5em;
  margin-right: 0.5em;
  line-height: 1.5em;
  transition: all, var(--transition-time);
}

.card:hover .tags .tag {
  background: var(--color);
  color: white;
}

.card .date {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.75em;
  padding: 1em;
  line-height: 1em;
  opacity: .8;
}

.card:before, .card:after {
  content: '';
  transform: scale(0);
  transform-origin: top left;
  border-radius: 50%;
  position: absolute;
  left: -50%;
  top: -50%;
  z-index: -5;
  transition: all, var(--transition-time);
  transition-timing-function: ease-in-out;
}

.card:before {
  background: #ddd;
  width: 250%;
  height: 250%;
}

.card:after {
  background: white;
  width: 200%;
  height: 200%;
}

.card:hover {
  color: var(--color);
}

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

.card-grid-space .num {
  font-size: 3em;
  margin-bottom: 1.2rem;
  margin-left: 1rem;
  color: rgb(255, 255, 255);
}

.info {
  font-size: 1.2em;
  display: flex;
  padding: 1em 3em;
  height: 3em;
}

.info img {
  height: 3em;
  margin-right: 0.5em;
}

.info h1 {
  font-size: 1em;
  font-weight: normal;
}

/* MEDIA QUERIES */
@media screen and (max-width: 1285px) {
  .cards-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 900px) {
  .cards-wrapper {
    grid-template-columns: 1fr;
  }
  .info {
    justify-content: center;
  }
  .card-grid-space .num {
    /margin-left: 0;
    /text-align: center;
  }
}

@media screen and (max-width: 500px) {
  .cards-wrapper {
    padding: 4rem 2rem;
  }
  .card {
    max-width: calc(100vw - 4rem);
  }
}

@media screen and (max-width: 450px) {
  .info {
    display: block;
    text-align: center;
  }
  .info h1 {
    margin: 0;
  }
}

Output of Blog Card Grid Css

Finally, we have made this Blog Card Grid Css with the help of HTML and CSS. We have written simple code with basic concepts. As you can see in the code if you are facing any problems. This is a very useful project, as you can use it to write any blog about anything. You can make such projects by taking ideas from here that will increase your knowledge. If you want the source code, then click on the button given below to download it.

Blog Card Grid 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 *

Latest Posts

Quick Links