Bootstrap Cards:

Bootstrap Card with Overlapping Description

Cards are literally small rectangles, also known as boxes, which contains a singular thought. Cards are usually filled with effects and interactive elements such as images, buttons, texts, links and more but all these elements suggest only one main action and that is clicking the card to discover more about the content in the card. In other words, a card is supposed to provide a not so detailed overview of the main topic in a limited space which interests the reader for further research. With cards, you can catch someone’s attention first and then allow them to read the full page written about it. just remember that your cards don’t have to necessarily contain any news; they just need to be engaging enough to catch the reader’s interest. You can also use beautiful Bootstrap CSS cards to amplify the effect these cards have on users.

Following is a Bootstrap overlap colour template design to add an image card with description to your website. The cards display the basic title and image in normal mode but once you hover your mouse over it, the description will also be shown through a series of animations. This card with overlap description is the perfect feature for your website.

Bootstrap Overlap Color

Image Card with Description

Card with Overlap Description

Bootstrap CSS Card

<!-- This script got from frontendfreecode.com -->
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card-deck">
        <div class="card text-white"><img class="card-img" src="https://frontendfreecode.com/img/cat-01.jpg"/>
          <div class="card-img-overlay">
            <h2 class="card-title">Card 1</h2>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p><a class="btn btn-outline-light" href="#">Find out</a>
          </div>
        </div>
        <div class="card text-white"><img class="card-img" src="https://frontendfreecode.com/img/cat-01.jpg"/>
          <div class="card-img-overlay">
            <h2 class="card-title">Card 2</h2>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. </p><a class="btn btn-outline-light" href="#">Find out</a>
          </div>
        </div>
        <div class="card text-white"><img class="card-img" src="https://frontendfreecode.com/img/cat-01.jpg"/>
          <div class="card-img-overlay">
            <h2 class="card-title">Card 3</h2>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. </p><a class="btn btn-outline-light" href="#">Find out</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.container {
  display: flex;
  align-items: center;
  min-height: 100vh;
}
.card-img-overlay {
  transform: translateY(13rem);
  transition: transform 0.18s ease-in;
  background-color: black;
}
@media (min-width: 576px){
.card-img-overlay {
 transform: translateY(6rem);
}
.card-title{
    font-size:18px;
    margin:0!important;
}
.card-img-overlay .card-text {
 font-size:11px;
 margin:0!important;
}
.card-img-overlay .btn {
 font-size:7px;
}
}
.card-img-overlay .card-text {
  opacity: 0;
  transform: translateY(-6rem);
  transition: opacity 0.05s ease-in, transform 0.25s ease-in;
}
.card-img-overlay .btn {
  opacity: 0;
  transform: translateY(2rem);
}
.card {
  overflow: hidden;
  background-color: #345;
}
.card:hover .card-img {
  mix-blend-mode: overlay;
}
.card:hover .card-img-overlay {
  transform: translateY(0);
  transition: transform 0.25s ease-out;
  background-color: rgba(0, 0, 0, 0.1);
}
.card:hover .card-text {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease-out, transform 0.2s ease-out;
}
.card:hover .btn {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s ease-out, transform 0.35s ease-out;
}

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<style>
.container {
  display: flex;
  align-items: center;
  min-height: 100vh;
}
.card-img-overlay {
  transform: translateY(13rem);
  transition: transform 0.18s ease-in;
  background-color: black;
}
@media (min-width: 576px){
.card-img-overlay {
 transform: translateY(6rem);
}
.card-title{
    font-size:18px;
    margin:0!important;
}
.card-img-overlay .card-text {
 font-size:11px;
 margin:0!important;
}
.card-img-overlay .btn {
 font-size:7px;
}
}
.card-img-overlay .card-text {
  opacity: 0;
  transform: translateY(-6rem);
  transition: opacity 0.05s ease-in, transform 0.25s ease-in;
}
.card-img-overlay .btn {
  opacity: 0;
  transform: translateY(2rem);
}
.card {
  overflow: hidden;
  background-color: #345;
}
.card:hover .card-img {
  mix-blend-mode: overlay;
}
.card:hover .card-img-overlay {
  transform: translateY(0);
  transition: transform 0.25s ease-out;
  background-color: rgba(0, 0, 0, 0.1);
}
.card:hover .card-text {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease-out, transform 0.2s ease-out;
}
.card:hover .btn {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s ease-out, transform 0.35s ease-out;
}
</style>

</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card-deck">
        <div class="card text-white"><img class="card-img" src="https://frontendfreecode.com/img/cat-01.jpg"/>
          <div class="card-img-overlay">
            <h2 class="card-title">Card 1</h2>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p><a class="btn btn-outline-light" href="#">Find out</a>
          </div>
        </div>
        <div class="card text-white"><img class="card-img" src="https://frontendfreecode.com/img/cat-01.jpg"/>
          <div class="card-img-overlay">
            <h2 class="card-title">Card 2</h2>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. </p><a class="btn btn-outline-light" href="#">Find out</a>
          </div>
        </div>
        <div class="card text-white"><img class="card-img" src="https://frontendfreecode.com/img/cat-01.jpg"/>
          <div class="card-img-overlay">
            <h2 class="card-title">Card 3</h2>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. </p><a class="btn btn-outline-light" href="#">Find out</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS