12+ CSS Blog Card Examples

This post contains a total of 12+ CSS Blog Card Examples with Source Code. All these Blog Cards are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Blog Card Examples

1. Blog Card Design

Made by Joshua. Simple CSS Blog cards with little bit of hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:[email protected];500;700;900&display=swap");
* {
  box-sizing: border-box;
}

body {
  background: #fff;
  font-family: "Roboto", sans-serif;
  min-height: 100vh;
  margin: 60px 0;
  color: #0d0c0c;
  background: url(https://animal-crossing.com/assets/img/patterns/footer-dots.png) #dd7f20;
}

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  transition: all 300ms ease;
}
.card:hover {
  transform: translateY(-5px);
  cursor: pointer;
}
.card__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px 32px;
}
.card__cover {
  height: 250px;
  background-size: cover;
  background-position: center;
  border-radius: 8px 8px 0 0;
  position: relative;
}
.card__tag {
  background: #dd2020;
  display: inline-block;
  position: absolute;
  bottom: 10px;
  left: 20px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
}
.card__body {
  padding: 20px;
}
.card__title {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 8px;
}
.card__desc {
  margin-bottom: 20px;
  font-size: 15px;
  color: #858484;
  line-height: 1.6;
}

.card__cover--one {
  background-image: url(https://cdn.dribbble.com/users/250235/screenshots/7885863/media/b2a6d5fb3c27de51d1c0c424296460ba.png);
}
.card__cover--two {
  background-image: url(https://cdn.dribbble.com/users/769121/screenshots/11112077/media/1445dc22a15c2590ac332fc20abaf2df.jpg);
}
.card__cover--three {
  background-image: url(https://cdn.dribbble.com/users/772985/screenshots/6034403/link_4x.png?compress=1&resize=1200x900);
}

#huck {
  max-width: 80px;
  position: fixed;
  right: 0;
  bottom: 0;
}
</style>
</head>
<body>
  <div class="card__container">
  <div class="card">
    <div class="card__cover card__cover--one">
      <div class="card__tag">Pokemon</div>
    </div>
    <div class="card__body">
      <div class="card__title">Pokemon Halloween Event</div>
      <div class="card__desc">Mario ipsum RGB mushroom 1-up. Lava NES fireball 1-up piranha plant castle green shell.</div>
    </div>
  </div>
  <div class="card">
    <div class="card__cover card__cover--two">
      <div class="card__tag">Animal Crossings</div>
    </div>
    <div class="card__body">
      <div class="card__title">Fishing in Animal Crossing</div>
      <div class="card__desc">Mario ipsum RGB mushroom 1-up. Lava NES fireball 1-up piranha plant castle green shell.      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__cover card__cover--three">
      <div class="card__tag">Zelda</div>
    </div>
    <div class="card__body">
      <div class="card__title">New Zelda Release</div>
      <div class="card__desc">Mario ipsum RGB mushroom 1-up. Lava NES fireball 1-up piranha plant castle green shell.        </div>
    </div>
  </div>
</div><img id="huck" src="https://animal-crossing.com/assets/img/characters/CTRP_EAA_NPC-flg11_1_R_ad.png"/>
</body>
</html>

2. Simple Blog Card

Made by Brett. Simple Blog Card without any effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url("https://fonts.googleapis.com/css?family=Nunito:200,400,400i,600,700,800");
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
html {
  background: #d7dee5;
  color: rgba(0, 0, 0, 0.8);
  font-family: "Nunito", "Open Sans", sans-serif;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
}

* {
  transition: all 0.35s ease-in-out;
}

.blog-card {
  display: block;
  position: relative;
  background: #444;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat !important;
  width: 85%;
  max-width: 700px;
  height: 380px;
  box-shadow: 4px 8px 28px rgba(39, 44, 49, 0.1), 1px 3px 8px rgba(39, 44, 49, 0.075);
  margin: 15vh auto;
  overflow: hidden !important;
}
.blog-card:hover {
  box-shadow: 0 0 1px rgba(39, 44, 49, 0.2), 0 3px 16px rgba(39, 44, 49, 0.25);
  transform: translate3D(0, -0.5px, 0);
}
.blog-card .content-mask {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  width: 61%;
  height: 100%;
  padding: 0.75em 0 0.75em 2.5em;
  overflow: hidden;
  z-index: 5;
}
.blog-card .horizontal {
  display: inline-block;
  position: relative;
  background: linear-gradient(to top right, rgba(255, 255, 255, 0.9) 50%, transparent 0);
  height: 101%;
  width: 20%;
  top: -5%;
  right: 0.8%;
  overflow: hidden;
}

.blog-card.python {
  background-image: url("https://sg.fiverrcdn.com/photos/115522316/original/0f1ff5d0ae8e6d044d936feaa91630dcec3a0941.jpg?1533894592");
}
.blog-card.web {
  background: url("https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2016/12/improving-website-performance-using-a-content-delivery-network-cdn.jpg");
}

.content-container {
  margin-right: -5vw;
}

.category {
  display: inline-block;
  background: #e23f7e;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  letter-spacing: 1px;
  text-align: center;
  min-width: 45px;
  border-radius: 5px;
  box-shadow: 0 0 1px rgba(172, 28, 56, 0.1), 0 2px 6px rgba(172, 28, 56, 0.175);
  margin: 3vh 2px 2.5vh;
  padding: 6px 8px;
  cursor: pointer;
  z-index: 9;
}
.category.python {
  background: #2a9d5a;
}
.category:hover {
  box-shadow: 0 0 1px rgba(10, 96, 58, 0.2), 0 3px 6px rgba(39, 44, 49, 0.25);
}

h1 {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  font-family: "Nunito", "Open Sans", sans-serif;
  font-size: 2.5em;
  font-weight: 800;
  line-height: 1.2;
  height: auto;
  border-bottom: 2px solid rgba(204, 204, 204, 0.75);
  margin-top: 0;
  margin-bottom: 0.35em;
  padding-bottom: 5px;
}

p {
  font-size: 1.1em;
  line-height: 1.4;
  width: 100%;
  margin-top: 0.3em;
  padding-left: 2px;
  z-index: 9;
}

.post-detail {
  color: rgba(0, 0, 0, 0.55);
  margin-top: 6.5vh;
  padding-left: 2px;
  vertical-align: middle;
}
.post-detail .icon svg {
  position: relative;
  width: 14px;
  top: 2.25px;
  margin-right: 7px;
}
.post-detail .date {
  color: rgba(0, 0, 0, 0.65);
  font-size: 0.85em;
}

.credit {
  position: relative;
  font-family: "Nunito" Helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: 200;
  text-align: center;
  bottom: 0.75em;
  margin-bottom: 10vh;
}
.credit .creator-link {
  color: #000;
  font-family: "Kaushan Script", "Lato", Helvetica, sans-serif;
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 300ms linear;
}
.credit .creator-link:hover {
  color: #FFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: all 350ms linear;
}
</style>
</head>
<body>
  <section>
	<div class="blog-card web">
		<div class="content-mask">
			<span class="category">Web</span>
			<h1>Improving Website Performance</h1>
			<p>A practical guide to speeding up your website loading-times</p>
			<div class="post-detail">
				<span class="icon"><svg class="svg-inline--fa fa-calendar-alt fa-w-14" aria-hidden="true" data-prefix="far" data-icon="calendar-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg></span><span class="date">21 July 2018</span>
			</div>
		</div>
		<div class="horizontal"></div>
	</div>
	<div class="blog-card python">
		<div class="content-mask">
			<span class="python category">Python</span>
			<h1>Testing Python</h1>
			<p>An example-based introduction to Python testing with pytest</p>
			<div class="post-detail">
				<span class="icon"><svg class="svg-inline--fa fa-calendar-alt fa-w-14" aria-hidden="true" data-prefix="far" data-icon="calendar-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg></span><span class="date">19 May 2018</span>
			</div>
		</div>
		<div class="horizontal"></div>
	</div>
	<div class="credit">Created by <a class="creator-link" href="https://brettstevenson.io">Brett Stevenson</a></div>
</section>
</body>
</html>

3. Blog Post Card

Made by Andis. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  display: flex;
  font-family: 'Roboto', sans-serif;
  color: #777;
  background: #eedfcc;
  font-size: 16px;
  min-height: 100vh;
  line-height: 1.6;
  align-items: center;
  justify-content: center;
}

#container {
  width: 650px;
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.blog-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  overflow: hidden;
  /* for rounded corners */
}

.card-link:hover .post-title {
  color: #e04f62;
}

.card-link:hover .post-image {
  opacity: 0.9;
}

.post-image {
  transition: opacity 0.3s ease;
  width: 40%;
  height: 280px;
  object-fit: cover;
}

.article-details {
  padding: 24px;
}

.post-category {
  display: inline-block;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
  margin: 0 0 12px 0;
  padding: 0 0 4px 0;
  border-bottom: 2px solid #ebebeb;
}

.post-title {
  transition: color 0.3s ease;
  font-size: 17;
  line-height: 1.4;
  color: #121212;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.post-author {
  font-size: 14px;
  line-height: 1;
  margin: 17px 0 0 0;
  padding: 17px 0 0 0;
  border-top: 1px solid #ebebeb;
}

@media (max-width: 700px) {
  #container {
    width: 330px;
  }

  .post-image {
    width: 100%;
  }

  .blog-card {
    flex-wrap: wrap;
  }
}
</style>
</head>
<body>
  <body>
  <main>
    <div id="container">
      <a class="card-link" href="#">
        <article class="blog-card">
          <img class="post-image" src="https://images.unsplash.com/photo-1526925539332-aa3b66e35444?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
          <div class="article-details">
            <h4 class="post-category">Learning</h4>
            <h3 class="post-title">How to become a badass programmer</h3>
            <p class="post-description">Do you dream of becoming a computer programmer, but think you're not (and never will be) cut out for the job? Turns out you're probably...</p>
            <p class="post-author">By Codelex</p>
          </div>
        </article>
      </a>
    </div>
</body>
</html>

4. Awesome Blog card design

Made by Stack Findover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  background: #e8eff7;
}
.grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  margin: 20px 0;
}
.card-top img {
  display: block;
  width: 100%;
}
.container {
  width: 95%;
  margin: auto;
}
.card {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
}
.card-top {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
}
.card-info h2 {
  font-size: 18px;
  margin: 10px 0 5px 0;
}
.date {
  margin-bottom: 10px;
}
span,p {
  font-size: 15px;
  display: block;
}
.excerpt {
  color: #aeaeae;
}
.flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-bottom {
  margin-top: 20px;
}
.button {
  text-decoration: unset;
  font-weight: 600;
  text-transform: uppercase;
  color: #4e4e4e;
  width: 80px;
  text-align: center;
  font-size: 15px;
  line-height: 30px;
  border-radius: 5px;
  background: #f2f4f6;
}
.read-more {
  text-decoration: unset;
  color: #000;
  font-weight: 600;
}
.btn-yellow {
  background: #ffb91d;
}
.btn-sky {
  background: #d2f9fe;
}
.btn-dpink {
  background: #e8d3fc;
}
</style>
</head>
<body>
	<div class="container">
		<div class="cards grid-row">
			<div class="card">
				<div class="card-top">
					<img src="https://i.ibb.co/jrwMVMS/img1.jpg" alt="Blog Name">
				</div>
				<div class="card-info">
					<h2>JavaScript Quote Generator</h2>
					<span class="date">Monday, Jan 20, 2021</span>
					<p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
				</div>
				<div class="card-bottom flex-row">
					<a href="#" class="read-more">Read Full Blog</a>
					<a href="#" class="button btn-yellow">Blog</a>
				</div>
			</div>
			<div class="card">
				<div class="card-top">
					<img src="https://i.ibb.co/y4ZKv5Q/img2.jpg" alt="Blog Name">
				</div>
				<div class="card-info">
					<h2>How to Build HTML Minifier</h2>
					<span class="date">Monday, Jan 20, 2021</span>
					<p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
				</div>
				<div class="card-bottom flex-row">
					<a href="#" class="read-more">Read Full Blog</a>
					<a href="#" class="button btn-sky">Blog</a>
				</div>
			</div>
			<div class="card">
				<div class="card-top">
					<img src="https://i.ibb.co/q1YDSJs/img3.jpg" alt="Blog Name">
				</div>
				<div class="card-info">
					<h2>How to Build Signature Pad</h2>
					<span class="date">Monday, Jan 20, 2021</span>
					<p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
				</div>
				<div class="card-bottom flex-row">
					<a href="#" class="read-more">Read Full Blog</a>
					<a href="#" class="button btn-dpink">Blog</a>
				</div>
			</div>
			<div class="card">
				<div class="card-top">
					<img src="https://i.ibb.co/FBZqhyT/img4.jpg" alt="Blog Name">
				</div>
				<div class="card-info">
					<h2>How to Build Gsap Gallery</h2>
					<span class="date">Monday, Jan 20, 2021</span>
					<p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
				</div>
				<div class="card-bottom flex-row">
					<a href="#" class="read-more">Read Full Blog</a>
					<a href="#" class="button btn-dpink">Blog</a>
				</div>
			</div>
		</div>		
	</div>
</body>
</html>

5. Basic Blog Card

Made by Battal Şahin. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:[email protected];400;500;600&display=swap');

*{
  margin: 0;
  border: 0;
  padding: 0;
  outline: 0;
  font-family: 'Rubik', sans-serif;
}

*, *:after, *:before{
  box-sizing: border-box;
}

html{
  position: relative;
  overflow: hidden;
  font-size: 16px;
}

@media screen and (max-width: 768px) {
    html {
        font-size:15px
    }
}

@media screen and (max-width: 465px) {
    html {
        font-size:14px
    }
}

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #f1f3f6;
}

.card{
  width: 25rem;
  height: auto;
  background: #fff;
  border-radius: 1.5rem;
  padding: 1.5rem;
  overflow: hidden;
  position: relative;
}

.card-img-holder{
  width: 100%;
  height: auto;
  position: relative;
}

.card-img-holder img{
  width: 100%;
  height: auto;
  max-height: 15rem;
  object-fit: cover;
  border-radius: 1.5rem;
}

.blog-title{
  color: #22215B;
  padding: 1rem 0;
  font-size: 1.5rem;
}

.description{
  padding: 1rem 0;
  color: #22215B80;
  font-size: 1rem;
}

.blog-time{
  font-size: .8rem;
  color: #22215B;
}

.options{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
}

.options span{
  font-weight: 600;
  color: #22215B;
}

.btn{
  font-size: 1rem;
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-weight: 400;
  background: #EEF7FE;
  color: #22215B;
  cursor: pointer;
}
</style>
</head>
<body>
  <div class="card">
  <div class="card-img-holder">
    <img src="https://images.unsplash.com/photo-1640102953836-5651f5d6b240?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1024&q=80" alt="Blog image">
  </div>
  <h3 class="blog-title">Learn Microinteraction</h3>
  <span class="blog-time">Monday Jan 20, 2020</span>
  <p class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis viverra turpis, non cursus ex accumsan at.
  </p>
  <div class="options">
    <span>
      Read Full Blog
    </span>
    <button class="btn">Blog</button>
  </div>
</div>
</body>
</html>
 

6. Blog cards with hover effects

Made by Evan Magnussen. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,600" rel="stylesheet">

<style>
:root{
  --time: .5s;
  --delay: var(--time);
  --function: ease;
}

*{
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
}

body{
  background: #566e;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card{
  position: relative;
  width: 20vw;
  height: 25vw;
  margin: 0 50px;
  margin-top: calc((100vh - 25vw)/2);
  overflow: hidden;
  box-shadow: 10px 10px 70px #344;
}

.opening{
  transition: all var(--time) var(--function), 
              width var(--time) var(--function) var(--delay), 
              left var(--time) var(--function) var(--delay), 
              margin-left var(--time) var(--function) var(--delay), 
              margin-right var(--time) var(--function) var(--delay),
              padding var(--time) var(--function) var(--delay);
}

.opening .tag{
  transition: all var(--time) ease, 
              left var(--time) var(--delay) ease;
}

.closing{
  transition: all var(--time) var(--function), 
              height var(--time) var(--function) var(--delay), 
              top var(--time) var(--function) var(--delay), 
              margin-top var(--time) var(--function) var(--delay);
}

.closing .tag{
  transition: all var(--time) ease;
}

.closing .icon{
  transition: opacity var(--time) ease;
}

.opening .icon{
  transition: opacity var(--time) var(--delay) ease, 
              transform .4s cubic-bezier(.35,-0.61,.56,1.46);
}
  
.image{
  position: absolute;
  max-width: 105%;
  height: auto;
  width: auto;
  z-index: 1;
  left: -2.5%;
  top: -2.5%;
}

.icon{
  position: absolute;
  right: 20px;
  top: 15px;
  opacity: 0;
  z-index: 10;
}

.icon:hover{
  transform: scale(1.1);
}  

.content{
  position: absolute;
  top: 30%;
  height: 60%;
  width: 100%;
  left: 0;
  padding: 20px;
  opacity: 0;
  background: #9aad;
  z-index: 2;
  overflow: hidden;
}

.title{
  min-height: 2vw;
  max-height: 5vw;
  font-size: 250%;
  text-transform: capitalize;
  margin-bottom: 5px;
  font-weight: bold;
  transition: all var(--time) var(--function);
}

.sub{
  font-size: .85vw;
  text-transform: uppercase;
  font-style: italic;
  transition: all var(--time) var(--function);
}

.description{
  font-size: 1vw;
  line-height: 1.5rem;
  max-height: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--time) var(--function);
}

.divider{
  height: 2px;
  width: 95%;
  margin: 5px 0 0 0;
  background: #788e;
  transition: all var(--time) ease;
}

.cont{
  position: absolute;
  top: 90%;
  height: 10%;
  width: 100%;
  z-index: 24;
  background: #9aad;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  opacity: 0;
  transition: all var(--time) var(--function);
}

.cont a{
  font-size: .85vw;
  align-self: flex-start;
  margin: 0;
  margin-left: 20px;
}

.cont span{
  padding:0;
  margin: 0;
  margin-left: 5px;
}

.cont .divider{
  margin-bottom: 5px;
}

.tag{
  position: absolute;
  max-height: 100px;
  min-height:4vw;
  width: 60px;
  top: -5%;
  max-width: 60px;
  min-width: 50px;
  left: 80%;
  opacity: 0;
  border: 3px solid #344;
  border-top: none;
  background-color: #9aae;
  transform: rotateX(90deg);
  transform-origin: top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 3;
  font-size: 0;
  
}

.month, .year{
  font-size: .75vw;
  text-transform: uppercase;
}

.day{
  font-size: 1.3vw;
}

.card:hover{
  transform: translate( -.3vh, -1vh);
  box-shadow: 15px 15px 75px #122;
}

.card:hover .image{
  transform: translate( .3vh, 1vh);  
}

.card:hover .content, .card:hover .cont{
  opacity: 1;
}

.card:hover .tag{
  top:0;
  left: 80%;
  border: 3px solid #677e;
  border-top: none;
  opacity: 1;
  transform: rotateX(0deg) perspective(5cm);
}

.displaying{
  width: 85vw;
  height: 75vh;
  margin-top: 12.5vh;
  justify-self: center;
}

.displaying .icon{
  opacity: 1;
}

.displaying .tag{
  top:0;
  left: 90%;
  border: 3px solid #677e;
  border-top: none;
  opacity: 1;
  transform: rotateX(0deg) perspective(5cm);
}

.displaying .content{
  width: 70%;
  height: 100%;
  left: 30%;
  padding-left: 40px;
  padding-right: 40px;
  background: #9aa;
  top: 0;
  opacity: 1;
}

.displaying .divider{
  width: 100%;
}

.displaying .content .title{
  height: 10%;
  min-height: 70px;
}

.displaying .content .sub{
  height: 5%;
  min-height: 30px;
}

.displaying .content .description{
    padding-right: 5px;
    height: 80%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.displaying .cont{
    opacity: 0;
}

.displaying .image{
  min-width: 32.5%;
  width: auto;
  height: auto;
}

.displaying:hover .tag{
  top:0;
  left: 90%;
  border: 3px solid #677e;
  border-top: none;
  opacity: 1;
  transform: rotateX(0deg) perspective(5cm);
}

.displaying:hover .cont{
  opacity: 0;
}

.hidden{
  width: 0;
  margin-left: 0;
  margin-right: 0;
  opacity: 0;
}
</style>
</head>
<body>
  <div class="card closing">
  <img class="icon" src="https://img.icons8.com/material/24/000000/multiply.png">
  <image class="image closing" src="https://images.unsplash.com/photo-1547598044-0120aca03937?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80"></image>
  <div class="tag closing"> 
    <div class="month">Dec.</div>
    <div class="day">21</div>
    <div class="year">2018</div>
  </div>
  <div class="content closing">
    <div class="title">the world is ending</div>
    <div class="sub">how to stay alive</div>
    <div class="divider"></div>
    <div class="description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam in arcu cursus euismod quis. Vel eros donec ac odio tempor. Id neque aliquam vestibulum morbi blandit cursus risus. Id faucibus nisl tincidunt eget nullam non nisi est sit. Nulla pellentesque dignissim enim sit amet venenatis urna cursus eget. Varius duis at consectetur lorem donec massa sapien. Eget arcu dictum varius duis at consectetur lorem donec. Amet purus gravida quis blandit. Amet massa vitae tortor condimentum lacinia quis vel eros donec. Tristique et egestas quis ipsum. Eu mi bibendum neque egestas congue. Purus gravida quis blandit turpis cursus in hac. Bibendum arcu vitae elementum curabitur vitae nunc. Ac feugiat sed lectus vestibulum mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Accumsan sit amet nulla facilisi.</p>

      <p>Mi in nulla posuere sollicitudin aliquam ultrices. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lorem ipsum dolor sit amet. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Elementum tempus egestas sed sed risus pretium quam. At elementum eu facilisis sed odio morbi. Sit amet massa vitae tortor condimentum lacinia quis vel. Magna eget est lorem ipsum. Pharetra vel turpis nunc eget. Consectetur a erat nam at. Arcu non sodales neque sodales. Vitae nunc sed velit dignissim. In vitae turpis massa sed. Eu ultrices vitae auctor eu. Tellus elementum sagittis vitae et leo duis ut. Ornare arcu odio ut sem nulla pharetra diam. Ultrices eros in cursus turpis massa tincidunt dui ut. Et netus et malesuada fames ac turpis egestas.</p>
      
      <p>Sed ullamcorper morbi tincidunt ornare massa eget. Sollicitudin aliquam ultrices sagittis orci. Facilisis sed odio morbi quis commodo odio aenean. Quis enim lobortis scelerisque fermentum. Enim diam vulputate ut pharetra. Lectus quam id leo in vitae turpis massa sed elementum. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Malesuada fames ac turpis egestas sed tempus urna. Purus in mollis nunc sed id semper risus in. Purus sit amet volutpat consequat. Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus. Id donec ultrices tincidunt arcu non sodales neque sodales. Sit amet dictum sit amet justo donec enim. Nisl suscipit adipiscing bibendum est ultricies integer. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper. Pellentesque nec nam aliquam sem et tortor consequat id. Eu ultrices vitae auctor eu. Lorem ipsum dolor sit amet.</p>
      
      </div>
  </div>
  <div class="cont">
    <div class="divider"></div><a>Continued<span> > </span></a>
  </div>
</div>


<div class="card two closing">
  <img class="icon" src="https://img.icons8.com/material/24/000000/multiply.png">
  <image class="image closing" src="https://images.unsplash.com/photo-1547129607-cb70df5e9b4b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=675&amp;q=80"></image>
  <div class="tag closing">
    <div class="month">Jan.</div>
    <div class="day">23</div>
    <div class="year">2019</div>
  </div>
  <div class="content closing">
    <div class="title">Hyperspace</div>
    <div class="sub">space my face</div>
    <div class="divider"></div>
    <div class="description"><p>Ut ius phaedrum sapientem facilisis. In case appetere consetetur sea. Per tollit putent propriae no, sea ignota numquam dissentiunt an, vim an modo sale insolens. No pro aperiri feugiat delenit, nisl solet maiorum at quo, sed ex etiam sanctus blandit.</p></div>
  </div>
  <div class="cont">
    <div class="divider"></div><a>Continued<span> ></span></a>
  </div>
</div>


<div class="card thr closing">
  <img class="icon" src="https://img.icons8.com/material/24/000000/multiply.png">
  <image class="image closing" src="https://images.unsplash.com/photo-1547628564-63087b10b94d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80"></image>
  <div class="tag closing"> 
    <div class="month">Jan.</div>
    <div class="day">30</div>
    <div class="year">2019</div>
  </div>
  <div class="content closing">
    <div class="title">Keith Haring</div>
    <div class="sub">Pop-art extraordinaire</div>
    <div class="divider"></div>
    <div class="description"><p>At quodsi recusabo laboramus ius, cu est cibo sententiae. Argumentum quaerendum adversarium cu eos, usu ea autem sensibus eloquentiam. Sed id amet fastidii accusamus. Dicit nullam vim ad, sea voluptaria incorrupte cu. Eos ea commune prodesset conceptam. Duo ex sanctus graecis, malis molestie explicari ei mea. Id inani platonem liberavisse mei.</p>
      
      <p>Varius sit amet mattis vulputate enim nulla aliquet. Ipsum consequat nisl vel pretium lectus quam id leo. Urna porttitor rhoncus dolor purus non enim praesent elementum. Nibh nisl condimentum id venenatis a condimentum. Sagittis purus sit amet volutpat consequat mauris nunc. Turpis egestas sed tempus urna et. Morbi tristique senectus et netus et. Rutrum quisque non tellus orci. Augue neque gravida in fermentum et sollicitudin ac orci. Nulla pellentesque dignissim enim sit amet venenatis urna. Aenean pharetra magna ac placerat vestibulum lectus. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Rhoncus urna neque viverra justo nec ultrices. Et malesuada fames ac turpis egestas maecenas pharetra. Risus nullam eget felis eget nunc lobortis mattis. Vitae suscipit tellus mauris a.</p>
      
      <p>Vestibulum morbi blandit cursus risus at ultrices. Orci a scelerisque purus semper eget duis at tellus. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. In est ante in nibh mauris cursus. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Habitant morbi tristique senectus et netus et malesuada fames. Viverra vitae congue eu consequat ac. Ut consequat semper viverra nam libero justo laoreet. Condimentum vitae sapien pellentesque habitant. Eu volutpat odio facilisis mauris. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Id eu nisl nunc mi ipsum faucibus.</p>
    </div>
  </div>
  <div class="cont">
    <div class="divider"></div><a>Continued<span> ></span></a>
  </div>
</div>
      <script>
const cards = document.querySelectorAll('.card'),
images = document.querySelectorAll('.image'),
content = document.querySelectorAll('.content'),
tags = document.querySelectorAll('.tag');

cards.forEach((c) =>
c.addEventListener('click', () => {
  cards.forEach(card => {
    card.classList.toggle('opening');
    card.classList.toggle('closing');
  });
  images.forEach(image => {
    image.classList.toggle('opening');
    image.classList.toggle('closing');
  });
  content.forEach(content => {
    content.classList.toggle('opening');
    content.classList.toggle('closing');
  });
  cards.forEach(card => {card === c ?
    c.classList.toggle('displaying') : card.classList.toggle('hidden');
  });
}));
    </script>
</body>
</html>

7. Animated Blog Card Slider

Made by Lợi Ryan. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Fira Sans', sans-serif;
  background: linear-gradient(147deg,#f6b323 0%, #f23b26 74%);
}
.blog-card{
  position: absolute;
  height: 370px;
  width: 95%;
  max-width: 850px;
  margin: auto;
  border-radius: 25px;
  background: white;
  box-shadow: 0px 10px 50px rgba(252,56,56,.3);
}
.inner-part{
  position: absolute;
  display: flex;
  height: 360px;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
}
#imgTap:checked ~ .inner-part {
  padding: 0;
  transition: .1s ease-in;
}
.inner-part .img{
  height: 260px;
  width: 260px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 2px 3px 15px rgba(252,56,56,.1);
}
#imgTap:checked ~ .inner-part .img{
  height: 370px;
  width: 850px;
  z-index: 99;
  margin-top: 10px;
  transition: .3s .2s ease-in;
}
.img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  opacity: 0;
  transition: .6s;
}
#tap-1:checked ~ .inner-part .img-1,
#tap-2:checked ~ .inner-part .img-2,
#tap-3:checked ~ .inner-part .img-3{
  opacity: 1;
  transition-delay: .2s;
}
.content{
  padding: 0 20px 0 35px;
  width: 530px;
  margin-left: 50px;
  opacity: 0;
  transition: .6s;
}
#imgTap:checked ~ .inner-part .content{
  display: none;
}
#tap-1:checked ~ .inner-part .content-1,
#tap-2:checked ~ .inner-part .content-2,
#tap-3:checked ~ .inner-part .content-3{
  opacity: 1;
  margin-left: 0px;
  z-index: 100;
  transition-delay: .3s;
}
.content span{
  display: block;
  color: #7b7992;
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 500
}
.content .title{
  font-size: 30px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}
.content .text{
  color: #4e4a67;
  font-size: 19px;
  margin-bottom: 30px;
  line-height: 1.5em;
  text-align: justify;
}
.content button{
  display: inline-flex;
  padding: 15px 20px;
  border: none;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff0e6;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  border: 1px solid #fd3535;
  background: linear-gradient(147deg, #fe8a39  0%, #fd3838 74%);
}
.content button:hover{
  background: linear-gradient(147deg, #fe791b 0%, #fd1c1c 74%);
}
.sliders{
  position: absolute;
  bottom: 25px;
  left: 65%;
  transform: translateX(-50%);
  z-index: 12;
}
#imgTap:checked ~ .sliders{
  display: none;
}
.sliders .tap{
  position: relative;
  height: 10px;
  width: 50px;
  background: #d9d9d9;
  border-radius: 5px;
  display: inline-flex;
  margin: 0 3px;
  cursor: pointer;
}
.sliders .tap:hover{
  background: #cccccc;
}
.sliders .tap:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: -100%;
  background: linear-gradient(147deg,#f6b323 0%, #f23b26 74%);
  border-radius: 10px;
  transform: scaleX(0);
  transition: transform .6s;
  transform-origin: left;
}
input[type="radio"],
input[type="checkbox"]{
  display: none;
}
#tap-1:checked ~ .sliders .tap-1:before,
#tap-2:checked ~ .sliders .tap-2:before,
#tap-3:checked ~ .sliders .tap-3:before{
  transform: scaleX(1);
  width: 100%;
}
</style>
</head>
<body>
    <div class="blog-card">
      <input type="radio" name="select" id="tap-1" checked>
      <input type="radio" name="select" id="tap-2">
      <input type="radio" name="select" id="tap-3">
      <input type="checkbox" id="imgTap">
      <div class="sliders">
        <label for="tap-1" class="tap tap-1"></label>
        <label for="tap-2" class="tap tap-2"></label>
        <label for="tap-3" class="tap tap-3"></label>
      </div>
<div class="inner-part">
        <label for="imgTap" class="img">
          <img class="img-1" src="https://1.bp.blogspot.com/-Ga-e_GzGxRE/XzzUK472nzI/AAAAAAAAAQE/PeG1J3CuAncX3Q-tzaV8hYSf4oGVOMVygCLcBGAsYHQ/s640/Cara%2BDownload%2BFile%2Bdi%2BGoogle%2BDrive%2Byang%2BLimit%2BAkses.png">
        </label>
        <div class="content content-1">
          <span>26 December 2017</span>
          <div class="title">
Lorem Ipsum Dolor</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo animi atque aliquid pariatur voluptatem numquam, quisquam. Neque est voluptates doloribus!</div>
<button>Read more</button>
        </div>
</div>
<div class="inner-part">
        <label for="imgTap" class="img">
          <img class="img-2" src="https://1.bp.blogspot.com/-4NOl0QubGPA/XzzUubur8-I/AAAAAAAAAQY/qHuoqQQhF88e_p9WjCSyZ9AnzcJppvcawCLcBGAsYHQ/s0/automatic%2Bposts%2Bslider%2Bblogger%2Bwidget.png">
        </label>
        <div class="content content-2">
          <span>26 December 2018</span>
          <div class="title">
Lorem Ipsum Dolor</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum eos ut consectetur numquam ullam fuga animi laudantium nobis rem molestias.</div>
<button>Read more</button>
        </div>
</div>
<div class="inner-part">
        <label for="imgTap" class="img">
          <img class="img-3" src="https://1.bp.blogspot.com/-DI07JFSzcmA/XzzU8sIcjxI/AAAAAAAAAQg/YV0moinU2pE0TnADOEx2CBFyw51-IkkZgCLcBGAsYHQ/s0/Cara%2BMembuat%2BPush%2BNotifications%2Bdi%2BBlog%2Bdengan%2BOneSignal.png">
        </label>
        <div class="content content-3">
          <span>26 December 2019</span>
          <div class="title">
Lorem Ipsum Dolor</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod excepturi nemo commodi sint eum ipsam odit atque aliquam officia impedit.</div>
<button>Read more</button>
        </div>
</div>
</div>
</body>
</html>

8. Simple Blog Card

Made by Scottie. Simple Blog Card made using CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");

* {
  padding: 0;
  margin: 0;
}

html {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background: #1488cc;
  background: -webkit-linear-gradient(to right, #2b32b2, #1488cc);
  background: linear-gradient(to right, #2b32b2, #1488cc);
}

.blog_post {
  background: #fff;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 1px 1px 2rem rgba(0, 0, 0, 0.3);
  position: relative;
}


.container_copy {
  padding: 6rem 4rem 5rem 4rem;
}

.img_pod {
  height: 110px;
  width: 110px;
  background: linear-gradient(90deg, #ff9966, #ff5e62);
  z-index: 10;
  box-shadow: 1px 1px 2rem rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: absolute;
  left: -10%;
  top: -13%;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  height: 8.3rem;
  width: 8.3rem;
  position: relative;
  border-radius: 100%;
  box-shadow: 1px 1px 2rem rgba(0, 0, 0, 0.3);
  z-index: 1;
}

h3 {
  margin: 0 0 0.5rem 0;
  color: #999;
  font-size: 1.25rem;
}

h1 {
  margin: 0 0 1rem 0;
  font-size: 2.5rem;
  letter-spacing: 0.5px;
  color: #333;
}

p {
  margin: 0 0 4.5rem 0;
  font-size: 1.5rem;
  line-height: 1.45;
  color: #333;
}

.btn_primary {
  border: none;
  outline: none;
  background: linear-gradient(90deg, #ff9966, #ff5e62);
  padding: 1.5rem 2rem;
  border-radius: 50px;
  color: white;
  font-size: 1.2rem;
  box-shadow: 1px 10px 2rem rgba(255, 94, 98, 0.5);
  transition: all 0.2s ease-in;
  text-decoration: none;
}

.btn_primary:hover {
  box-shadow: 0px 5px 1rem rgba(255, 94, 98, 0.5);
}

@media only screen and (max-width: 650px) {
  body {
    background-color: black;
  }

  .img_pod {

  }
}
</style>
</head>
<body>
  <div class="blog_post">
  <div class="img_pod">
    <img src="https://pbs.twimg.com/profile_images/890901007387025408/oztASP4n.jpg" alt="random image">
  </div>
  <div class="container_copy">
    <h3>12 January 2019</h3>
    <h1>CSS Positioning</h1>
    <p>The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).</p>
    <a class="btn_primary" href='#' target="_blank">Read More</a>
  </div>
  
</div>
</body>
</html>

9. Pure CSS Blog Card

Made by themodrnhakr. Pure CSS Blog Card with hover and slide effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
      rel="stylesheet">
 
<style>
@import url("https://fonts.googleapis.com/css2?family=Alice&family=Antic+Slab&family=Asap+Condensed&family=Bubbler+One&family=Cagliostro&family=Cambo&family=Capriola&family=Chathura&family=Copse&family=Courier+Prime&family=Crimson+Pro&family=Cutive&family=Cutive+Mono&family=Dongle&family=Dosis&family=DotGothic16&family=Gowun+Batang&family=IM+Fell+English&family=Istok+Web&family=Jaldi&family=Josefin+Slab&family=Kite+One&family=Kiwi+Maru&family=Kodchasan&family=Laila&family=M+PLUS+Rounded+1c&family=Maitree&family=Mandali&family=Manjari&family=Marmelad&family=NTR&family=New+Tegomin&family=Nunito&family=Port+Lligat+Slab&family=Qahiri&family=Quando&family=Quicksand&family=Sanchez&family=Sawarabi+Mincho&family=Solway&family=Stylish&family=Text+Me+One&family=Varela+Round&family=Yomogi&family=Yuji+Syuku&display=swap");

:root {
  /* set rems */

  font-size: 16px;

  /* base unit */

  --bu: calc(1rem + max(1vh, 1vw));

  /* colors */

  --primary: hsla(160, 26%, 22%, 100%);
  --primary-light: hsla(160, 26%, 42%, 100%);
  --primary-lighter: hsla(160, 26%, 62%, 100%);
  --dark: hsla(15, 11%, 21%, 100%);
  --dark-light: hsla(15, 11%, 31%, 100%);
  --dark-lighter: hsla(15, 11%, 41%, 100%);
  --light: hsla(49, 24%, 90%, 100%);
  --light-dark: hsla(49, 24%, 80%, 100%);
  --light-darker: hsla(49, 24%, 75%, 100%);
  --accent: hsla(15, 48%, 37%, 100%);
  --accent-light: hsla(15, 48%, 57%, 100%);
  --accent-lighter: hsla(15, 48%, 67%, 100%);

  /* default-font-size */

  --default-font-size: calc(var(--bu) * 0.75);

  /* set background color */

  background: var(--light);
}

*,
*::before,
*::after {
  /* resets */

  padding: 0;
  margin: 0;
  box-sizing: border-box;

  /* defaults */

  color: var(--dark);
  font-family: "Jaldi", sans-serif;
  font-size: var(--default-font-size);
  font-weight: 400;
  text-decoration: none;
}

.desc {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25vh;
}

.desc h1 {
  text-align: center;
  font-family: "Capriola", sans-serif;
  font-size: 3rem;
}

/* create generic section */

section {
  position: absolute;
  padding: calc(var(--bu) * 2);
  margin: auto;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--bu);
  height: 400px;
  width: 100%;
  background: var(--primary);
}

/* simulate responsivity */

#second {
  display: none;
}

@media (min-width: 800px) {
  #second {
    display: block;
  }
}

/* style card */

.container {
  position: relative;
  height: 100%;
  flex-basis: 75%;
  border-radius: var(--bu);
}

@media (max-width: 500px) {
  .container {
    flex-basis: 100%;
  }
}

.container figure {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  inset: 0 auto;
  height: 75%;
  width: 45%;
  box-shadow: 5px 5px 15px hsla(0, 0%, 0%, 0.5);
  overflow: hidden;
}

.container figure img {
  min-height: 100%;
  transform: rotate(0deg);
  scale: 1;
  transition: scale 500ms ease-in-out, transform 500ms ease-in-out;
}

.card {
  position: absolute;
  right: 0;
  height: 100%;
  width: 85%;
  border-radius: var(--bu);
  background: linear-gradient(var(--light), var(--light-dark));
}

.content {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin: auto;
  inset: 0 0 0 auto;
  width: 64.5%;
  height: 90%;
  overflow: hidden;
}

.title {
  position: absolute;
  padding: calc(var(--bu) * 0.25) calc(var(--bu) * 0.5);
  margin: auto;
  inset: auto 0 50%;
  font-family: "Capriola", sans-serif;
  text-align: center;
  transition: bottom 500ms ease-in-out;
}

.title::before {
  content: "";
  position: absolute;
  bottom: -5px;
  right: 5%;
  width: 90%;
  height: 5px;
  border-radius: 2.5px;
  background: var(--accent);
  transition: width 500ms 300ms ease-in-out;
}

.tags {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--bu) * 0.25);
  padding: calc(var(--bu) * 0.25) calc(var(--bu) * 0.5);
  margin: auto;
  inset: 50% 0 auto;
  opacity: 100%;
  transition: opacity 500ms 800ms;
}

.tags p {
  font-size: calc(var(--default-font-size) * 0.75);
}

.tags span {
  width: 100%;
}

.text {
  position: absolute;
  top: 100%;
  padding: 0 calc(var(--bu) * 0.5);
  transition: top 500ms ease-in;
}

.text p {
  font-size: calc(var(--default-font-size) * 0.9);
}

.content > span {
  font-size: calc(var(--bu) * 1.75);
  opacity: 100%;
  transform: translateY(0px);
  transition: transform 500ms 500ms ease-out, opacity 300ms 500ms;
}

a:hover figure {
  box-shadow: 5px 5px 30px hsla(0, 0%, 0%, 0.5);
}

a:hover figure img {
  transform: rotate(-1.25deg);
  scale: 1.1;
  transition: scale 500ms ease-in-out, transform 500ms ease-in-out;
}

a:hover .card {
  transform: translateX(2.5px) translateY(2.5px);
  background: linear-gradient(var(--light), var(--light-darker));
}

a:hover .title {
  bottom: 75%;
  transition: bottom 300ms 495ms ease-out;
}

a:hover .title::before {
  width: 0%;
  transition: width 300ms 300ms ease-in;
}

a:hover .tags {
  opacity: 0%;
  transition: opacity 300ms ease-in;
}

a:hover .text {
  top: 25%;
  transition: top 500ms 300ms ease-out;
}

a:hover .content > span {
  transform: translateY(25%);
  opacity: 0%;
  transition: transform 300ms ease-in, opacity 200ms;
}
</style>
</head>
<body>
  <div class="desc">
  <h1>hover over a card</h1>
</div>
<section>
  <a href="#" class="container">
    <div class="card">
      <div class="content">
        <h3 class="title">A Great Title</h3>
        <div class="tags">
          <p>mm/dd/yyyy</p>
          <span></span>
          <p class="material-icons-round">visibility</p>
          <p>5k</p>
          <p class="material-icons-round">comment</p>
          <p>53</p>
        </div>
        <div class="text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique ut dolor non aliquam. Donec.
          </p>
        </div>
        <span class="material-icons-round">expand_less</span>
      </div>

    </div>
    <figure>
      <img src="https://picsum.photos/seed/298/300/200" />
    </figure>
  </a>
  <a href="#" id="second" class="container">
    <div class="card">
      <div class="content">
        <h3 class="title">Lovely Title</h3>
        <div class="tags">
          <p>mm/dd/yyyy</p>
          <span></span>
          <p class="material-icons-round">visibility</p>
          <p>4k</p>
          <p class="material-icons-round">comment</p>
          <p>45</p>
        </div>
        <div class="text">
          <p>
            Cras sed pulvinar leo. Vivamus egestas elementum nisl, id ornare libero consectetur nec. Morbi accumsan sed diam.
          </p>
        </div>
        <span class="material-icons-round">expand_less</span>
      </div>
    </div>
    <figure>
      <img src="https://picsum.photos/seed/268/300/200" />
    </figure>
  </a>
</section>
</body>
</html>

10. Blog Card with slide effect

Made by Lahesh. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');

.container{
  display: flex;
  justify-content: center;
  padding: 80px;
}

.square:hover {
    -webkit-transform: translate(20px, -10px);
    -ms-transform: translate(10px, -10px);
    transform: translate(10px, -10px);
    -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
     }


.square{
  width: 460px;
	height: 430px;
	background: white;
  border-radius: 4px;
  box-shadow: 0px 20px 50px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; 
}

.mask{
  clip: rect(0px, 460px, 220px, 0px);
  border-radius: 4px;
  position: absolute;
}

img{
  width: 460px;
  }

.h1{
  margin: auto;
  text-align: left;
  margin-top: 240px;
  padding-left: 30px;
  
  font-family: 'Merriweather', serif;
  font-size: 24px;
}
p{
 text-align: justify; 
 padding-left: 30px;
 padding-right: 30px;
 font-family: 'Open Sans', sans-serif;
 font-size: 12px;
 color: #C8C8C8;
 line-height: 18px;
}

.button {
    background-color: #3EDD84;
    color: white;
    width: 90px;
    padding: 10px 18px;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 70px;
    font-size: 12px;
    cursor: pointer;
    font-family: 'merriweather';
</style>
</head>
<body>
    <div class="container">
      <div class="square">
        <img src="https://images.unsplash.com/photo-1504610926078-a1611febcad3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1c8fe0c9197d66232511525bfd1cc82&auto=format&fit=crop&w=1100&q=80" class="mask">
     <div class="h1">Is Apple a Design Company?</div>
        <p>Apple is more than a tech company; it became a culture unto itself, a passion of most of people and the birthplace of the world’s most revolutionized products.</p>
        
     <div><a href="https://medium.com/@laheshk/is-apple-a-design-company-f5c83514e261" target="_" class="button">Read More</a></div>
      </div>
      </div> 
    </div>
</body>
</html>

11. Blog Card with Transparent Text Animation

Made by Daiquiri.io. Blog Card with Transparent Text Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Lato:300,500" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/icomoon.css'>
  
<style>
body {
  background-color: #252830;
  color: white;
  font-family: "Lato";
}
.container-fluid {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 100%;
}
.media {
  background-position: center;
  background-size: cover;
  height: 100%;
  position: absolute;
  transition: all 0.3s ease;
  width: 100%;
}
figure {
  height: 370px;
  overflow: hidden;
  position: relative;
}
figure a {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}
figure:hover .media {
  transform: scale(1.25);
}
figcaption {
  color: #252830;
  height: calc(100% - 30px);
  margin: 15px;
  left: 0;
  position: absolute;
  top: 0;
  width: 250px;
}
.body {
  background-color: white;
  bottom: 0;
  padding: 15px;
  position: absolute;
  width: 100%;
}
svg {
  height: inherit;
  width: 100%;
}
svg text {
  text-anchor: middle;
}
svg #alpha {
  fill: white;
}
svg .title {
  font-size: 28px;
  font-family: "Montserrat";
  letter-spacing: 5px;
}
svg #base {
  fill: white;
  -webkit-mask: url(#mask);
  mask: url(#mask);
}
</style>
</head>
<body>
  <div class="container-fluid">
  <div class="col-lg-6 col-lg-offset-0 col-md-6 col-md-offset-0 col-sm-10 col-sm-offset-1 col-xs-12">
    <figure>
      <div class="media" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/bg_15.png)"></div>
      <figcaption>
        <svg viewBox="0 0 200 200" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <mask id="mask" x="0" y="0" width="100%" height="100%">
              <rect id="alpha" x="0" y="0" width="100%" height="100%"></rect>
              <text class="title" dx="50%" dy="2.5em">ENJOY</text>
              <text class="title" dx="50%" dy="3.5em">EVERY</text>
              <text class="title" dx="50%" dy="4.5em">MOMENT</text>
            </mask>
          </defs>
          <rect id="base" x="0" y="0" width="100%" height="100%"></rect>
        </svg>
        <div class="body">
          <p>Enamel pin selvage health goth edison bulb, venmo glossier tattooed hella butcher cred iPhone.</p>
        </div>
      </figcaption><a href="#"></a>
    </figure>
  </div>
  <div class="col-lg-6 col-md-6 hidden-sm hidden-xs">
    <figure>
      <div class="media" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/bg_5.png)"></div>
      <figcaption>
        <svg viewBox="0 0 200 200" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <mask id="mask" x="0" y="0" width="100%" height="100%">
              <rect id="alpha" x="0" y="0" width="100%" height="100%"></rect>
              <text class="title" dx="50%" dy="2.5em">ENJOY</text>
              <text class="title" dx="50%" dy="3.5em">EVERY</text>
              <text class="title" dx="50%" dy="4.5em">MOMENT</text>
            </mask>
          </defs>
          <rect id="base" x="0" y="0" width="100%" height="100%"></rect>
        </svg>
        <div class="body">
          <p>Enamel pin selvage health goth edison bulb, venmo glossier tattooed hella butcher cred iPhone. Plaid skateboard man braid wayfarers.</p>
        </div>
      </figcaption><a href="#"></a>
    </figure>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script id="rendered-js" >
"use strict";
    </script>
</body>
</html>

12. Blog Card Page

Made by LΓΌtfΓΌ Can. Blog card page with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css'>
  
<style>
body {
  background: #eee;
}

.date__box {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ccc;
  border: 4px solid;
  font-weight: bold;
  padding: 5px 10px;
}
.date__box .date__day {
  font-size: 22px;
}

.blog-card {
  padding: 30px;
  position: relative;
}
.blog-card .date__box {
  opacity: 0;
  transform: scale(0.5);
  transition: 300ms ease-in-out;
}
.blog-card .blog-card__background,
.blog-card .card__background--layer {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.blog-card .blog-card__background {
  padding: 15px;
  background: white;
}
.blog-card .card__background--wrapper {
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 60%);
  position: relative;
  overflow: hidden;
}
.blog-card .card__background--main {
  height: 100%;
  position: relative;
  transition: 300ms ease-in-out;
  background-repeat: no-repeat;
  background-size: cover;
}
.blog-card .card__background--layer {
  z-index: 0;
  opacity: 0;
  background: rgba(51, 51, 51, 0.9);
  transition: 300ms ease-in-out;
}
.blog-card .blog-card__head {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-card .blog-card__info {
  z-index: 10;
  background: white;
  padding: 20px 15px;
}
.blog-card .blog-card__info h5 {
  transition: 300ms ease-in-out;
}
.blog-card:hover .date__box {
  opacity: 1;
  transform: scale(1);
}
.blog-card:hover .card__background--main {
  transform: scale(1.2) rotate(5deg);
}
.blog-card:hover .card__background--layer {
  opacity: 1;
}
.blog-card:hover .blog-card__info h5 {
  color: #ffb535;
}

a.icon-link {
  color: #363738;
  transition: 200ms ease-in-out;
}
a.icon-link i {
  color: #ffb535;
}
a.icon-link:hover {
  color: #ffb535;
  text-decoration: none;
}

.btn {
  background: white;
  color: #363738;
  font-weight: bold;
  outline: none;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  border-radius: 0;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  padding: 0;
  border: none;
}
.btn:focus {
  box-shadow: none;
}
.btn:hover {
  background: #ffb535;
  color: #fff;
}
.btn.btn--with-icon {
  padding-right: 20px;
}
.btn.btn--with-icon i {
  padding: 0px 30px 0px 15px;
  margin-right: 10px;
  height: 50px;
  line-height: 50px;
  vertical-align: bottom;
  color: white;
  background: #ffb535;
  clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%);
}
.btn.btn--only-icon {
  width: 50px;
}
</style>
</head>
<body>
  <div class="container mt-5">
  <div class="row">
    <div class="col-12">
      <article class="blog-card">
        <div class="blog-card__background">
          <div class="card__background--wrapper">
            <div class="card__background--main" style="background-image: url('http://demo.yolotheme.com/html/motor/images/demo/demo_131.jpg');">
              <div class="card__background--layer"></div>
            </div>
          </div>
        </div>
        <div class="blog-card__head">
          <span class="date__box">
            <span class="date__day">11</span>
            <span class="date__month">JAN</span>
          </span>
        </div>
        <div class="blog-card__info">
          <h5>HARVICK GETS WHAT HE NEEDS, JOHNSON AMONG THOSE</h5>
          <p>
            <a href="#" class="icon-link mr-3"><i class="fa fa-pencil-square-o"></i> Tony Jahson</a>
            <a href="#" class="icon-link"><i class="fa fa-comments-o"></i> 150</a>
          </p>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque vero libero voluptatibus earum? Alias dignissimos quo cum, nulla esse facere atque, blanditiis doloribus at sunt quas, repellendus vel? Et, hic!</p>
          <a href="#" class="btn btn--with-icon"><i class="btn-icon fa fa-long-arrow-right"></i>READ MORE</a>
        </div>
      </article>
    </div>
  </div>
</div>

<section class="detail-page">
  <div class="container mt-5">
    
  </div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js'></script>

</body>
</html>

13. Responsive UI Card

Made by Vishnu Reji. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.8.2/css/all.css'>
  
<style>
h1{
  text-align:center;
  margin-bottom:50px;
  margin-top:50px;
}
.blog-card-blog {
    margin-top: 30px;
}
.blog-card {
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.blog-card .blog-card-image {
    height: 60%;
    position: relative;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -30px;
    border-radius: 6px;
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.blog-card .blog-card-image img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    pointer-events: none;
}
.blog-card .blog-table {
    padding: 15px 30px;
}
.blog-table {
    margin-bottom: 0px;
}
.blog-category {
    position: relative;
    line-height: 0;
    margin: 15px 0;
}
.blog-text-success {
    color: #28a745!important;
}
.blog-card-blog .blog-card-caption {
    margin-top: 5px;
}
.blog-card-caption {
    font-weight: 700;
    font-family: "Roboto Slab", "Times New Roman", serif;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.blog-card-caption, .blog-card-caption a {
    color: #333;
    text-decoration: none;
}

p {
    color: #3C4857;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.blog-card .ftr {
    margin-top: 15px;
}
.blog-card .ftr .author {
    color: #888;
}

.blog-card .ftr div {
    display: inline-block;
}
.blog-card .author .avatar {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;blog-
}
.blog-card .ftr .stats {
    position: relative;
    top: 1px;
    font-size: 14px;
}
.blog-card .ftr .stats {
    float: right;
    line-height: 30px;
}
</style>
</head>
<body>
  <h1>UI Card</h1>
<div class="container">
  <div class="row">
    <div class="col-md-4">
  <div class="blog-card blog-card-blog">
    <div class="blog-card-image">
        <a href="#"> <img class="img" src="https://picsum.photos/id/1084/536/354?grayscale"> </a>
        <div class="ripple-cont"></div>
    </div>
    <div class="blog-table">
        <h6 class="blog-category blog-text-success"><i class="far fa-newspaper"></i> News</h6>
        <h4 class="blog-card-caption">
            <a href="#">Lorem Ipsum is simply dummy text of the printing and</a>
        </h4>
        <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <div class="ftr">
            <div class="author">
                <a href="#"> <img src="https://picsum.photos/id/1005/5760/3840" alt="..." class="avatar img-raised"> <span>Lorem</span> </a>
            </div>
            <div class="stats"> <i class="far fa-clock"></i> 10 min </div>
        </div>
    </div>
</div>
</div>
    
    
    <div class="col-md-4">
  <div class="blog-card blog-card-blog">
    <div class="blog-card-image">
        <a href="#"> <img class="img" src="https://picsum.photos/id/1084/536/354?grayscale"> </a>
        <div class="ripple-cont"></div>
    </div>
    <div class="blog-table">
        <h6 class="blog-category blog-text-success"><i class="fas fa-blog"></i> News</h6>
        <h4 class="blog-card-caption">
            <a href="#">Lorem Ipsum is simply dummy text of the printing and</a>
        </h4>
        <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <div class="ftr">
            <div class="author">
                <a href="#"> <img src="https://picsum.photos/id/1005/5760/3840" alt="..." class="avatar img-raised"> <span>Lorem</span> </a>
            </div>
            <div class="stats"> <i class="far fa-clock"></i> 10 min </div>
        </div>
    </div>
</div>
</div>
    
    <div class="col-md-4">
  <div class="blog-card blog-card-blog">
    <div class="blog-card-image">
        <a href="#"> <img class="img" src="https://picsum.photos/id/1084/536/354?grayscale"> </a>
        <div class="ripple-cont"></div>
    </div>
    <div class="blog-table">
        <h6 class="blog-category blog-text-success"><i class="far fa-newspaper"></i> News</h6>
        <h4 class="blog-card-caption">
            <a href="#">Lorem Ipsum is simply dummy text of the printing and</a>
        </h4>
        <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <div class="ftr">
            <div class="author">
                <a href="#"> <img src="https://picsum.photos/id/1005/5760/3840" alt="..." class="avatar img-raised"> <span>Lorem</span> </a>
            </div>
            <div class="stats"> <i class="far fa-clock"></i> 10 min </div>
        </div>
    </div>
</div>
</div>
  </div>
</div>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
</body>
</html>