Responsive Blog List Design with overlay title

In this tutorial, we are going to design a responsive blog list design using Bootstrap. The layout design comprises of a list of blog posts along with an image and title associated with it. The title is displayed over the image with gradient background in the image.

Source Code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">

    <style type="text/css">
      body{
        font-family: monospace;
        background-color: lightblue;
      }
      h1{
        border-bottom: 1px solid #dee2e6;
        padding: 20px 0px;
        text-align: center;
      }
      .news-block img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .news-block{
        margin-top: 20px;
      }
      .news-block .col{
        margin-bottom: 20px;
        padding: 0px 20px;
      }
      .news-block .col div{
        box-shadow: 0 3px 10px rgb(0,0,0);
        position: relative;
        height: 330px;
      }
      .news-block .col div:before{
        content: '';
        background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.88));
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
      }
      .news-block .title{
        text-align: center;
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 10px 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>Responsive Blog List Design</h1>
      </div>
      <div class="row news-block">
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Notebook Design using HTML & CSS</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2021/02/notebook.jpeg">
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Rainfall Effect using Canvas</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2021/03/rainfall-effect-using-canvas.png">
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Access Camera and Read QR code using JavaScript</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2021/05/Access-Camera-and-Read-QR-code-using-JavaScript.jpeg">
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Rotating 3D Cube effect using HTML and CSS</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2021/03/rotating-3d-cube-using-html-css.jpg">
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Skeleton Loading Screen Animation using HTML and CSS</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2021/02/skeleton-loading-screen-animation-using-html-css.jpg">
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Create an Analog Clock using HTML, CSS and jQuery</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2021/02/analog-clock-using-html-css-and-jquery.png">
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Random Quotes Generator using PHP API</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2021/02/random-quote-generator.jpg">
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Prevent Too Many Request From a Client using PHP</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2021/01/too-many-requests.png">
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Rotate Car using JQuery</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2020/11/car-rotating-using-jquery.jpg">
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Rotate Car using JQuery</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2020/11/car-rotating-using-jquery.jpg">
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Rotate Car using JQuery</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2020/11/car-rotating-using-jquery.jpg">
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 col">
          <div>
            <h4 class="title">Rotate Car using JQuery</h4>
            <img src="https://reeteshghimire.com.np/wp-content/uploads/2020/11/car-rotating-using-jquery.jpg">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Follow this video for complete guidance :



Recommended For You

About the Author: Admin