How to Display Content on hovering Card using CSS

How to Display Content on hovering Card using CSS?

Download source code Responsive Video Card

In this Tutorial, We will see How to Display Content on hovering Card using the CSS hover effect and HTML. The Hide content will display when user mouseover on the Card UI. When creating a Card for your website or something like that you might need to add some Heading and Description on Hover effect. You can use the CSS property methods to add the Heading and Description On mouse hover effect.

Bootstrap cards are very useful when you are building responsive websites for any purpose like Blog, Company website etc.

While creating the Responsive video card, I am using Bootstrap 5, Pretty Photo library and custom CSS for designing. Pretty Photo library is used to show the video on popup when user click on watch button.

The HTML Code

The HTML code is used to create the structure of our HTML Card UI. The HTML Snippet below.

We create the div with the bootstrap class name card. Create one another div for image with the class name img. Under this div place the img tag with image URL. Create another div with class top-text. Add heading h3 and paragraph inside add span the top-text “div” with some random content.

Display Content on hovering Card using the CSS hover effect

<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 ">
      <div class="card mb-4">
        <div class="img"> <img src="profile-3.jpeg"> </div>
        <div class="top-text pt-2">
          <div class="title">
            <h3>HTML CSS Tutorials</h3>
          </div>
          <p><span>HTML</span> <span>CSS</span> <span>Javascript</span></p>
        </div>
        <div class="bottom-text pt-2">
          <div class="title">
            <h3>HTML CSS Tutorials</h3>
          </div>
          <p><span>HTML</span> <span>CSS</span> <span>Javascript</span></p>
          <div class="watch">
            <a href="#" class="btn-w"><i class="fad fa-play"></i> Watch</a>
<a href="#" class="share"><i class="fad fa-share-alt"></i></a>
          </div>
        </div>
      </div>
    </div>

The CSS Code

In this section, we will assign CSS properties to the HTML element.

style.css

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  background: #e52d27; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #b31217, #e52d27); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #b31217, #e52d27); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.card {
  -webkit-transition: -webkit-transform .25s cubic-bezier(.33, .04, .63, .93);
  transition: -webkit-transform .25s cubic-bezier(.33, .04, .63, .93);
  transition: transform .25s cubic-bezier(.33, .04, .63, .93);
  transition: transform .25s cubic-bezier(.33, .04, .63, .93), -webkit-transform .25s cubic-bezier(.33, .04, .63, .93);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
cursor: pointer;
}
.card:hover {
  z-index: 99;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: scale3d(1.2, 1.2, 1) translateZ(0) perspective(500px);
  transform: scale3d(1.2, 1.2, 1) translateZ(0) perspective(500px);
  -webkit-transition: -webkit-transform .25s cubic-bezier(.33, .04, .63, .93);
  transition: -webkit-transform .25s cubic-bezier(.33, .04, .63, .93);
  transition: transform .25s cubic-bezier(.33, .04, .63, .93);
  transition: transform .25s cubic-bezier(.33, .04, .63, .93), -webkit-transform .25s cubic-bezier(.33, .04, .63, .93);
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
  position: relative;
  z-index: 10;
}
.card:after {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: -7px;
  right: -7px;
  border: 0 solid #fff;
  border-radius: 8px;
  opacity: 0;
  -webkit-transition: border .25s cubic-bezier(.33, .04, .63, .93);
  transition: border .25s cubic-bezier(.33, .04, .63, .93);
  pointer-events: none;
  z-index: 1;
}
.card:hover:after {
  content: "";
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
  border-width: 8px;
  border-radius: 8px;
  opacity: .99;
  -webkit-transition: border-width .25s cubic-bezier(.33, .04, .63, .93), opacity .25s cubic-bezier(.33, .04, .63, .93), top .25s cubic-bezier(.33, .04, .63, .93), opacity .25s cubic-bezier(.33, .04, .63, .93), right .25s cubic-bezier(.33, .04, .63, .93), opacity .25s cubic-bezier(.33, .04, .63, .93), bottom .25s cubic-bezier(.33, .04, .63, .93), opacity .25s cubic-bezier(.33, .04, .63, .93), left .25s cubic-bezier(.33, .04, .63, .93), opacity .25s cubic-bezier(.33, .04, .63, .93);
  transition: border-width .25s cubic-bezier(.33, .04, .63, .93), opacity .25s cubic-bezier(.33, .04, .63, .93), top .25s cubic-bezier(.33, .04, .63, .93), opacity .25s cubic-bezier(.33, .04, .63, .93), right .25s cubic-bezier(.33, .04, .63, .93), opacity .25s cubic-bezier(.33, .04, .63, .93), bottom .25s cubic-bezier(.33, .04, .63, .93), opacity .25s cubic-bezier(.33, .04, .63, .93), left .25s cubic-bezier(.33, .04, .63, .93), opacity .25s cubic-bezier(.33, .04, .63, .93);
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}
.card .img {
  height: 200px;
  width: 100%;
}
.card .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.card .top-text {
  padding: 10px 10px 10px 10px;
}
.card .title h3 {
  font-size: 15px;
  font-weight: bold;
}
.card p {
  font-size: 11px !important;
  line-height: 20px;
  margin-bottom: 0px;
}
.card p span::before {
  content: "\f192";
  font-family: "Font Awesome 5 Pro";
  width: 2px;
  height: 2px;
  border-radius: 100%;
  margin: 3px 3px 0;
  background: rgb(4 123 245 / 44%);
  color: #047cd2;
  text-align: center;
}
.watch {
  margin-top: 5px;
}
.watch i {
  font-size: 10px;
}
.watch .btn-w {
  font-size: 13px;
  text-decoration: none;
  background: #fff;
  border: 1px solid #047cd2;
  padding: 3px 5px 3px 5px;
  border-radius: 5px;
	margin-right: 10px;
}
.share i{
	font-size: 15px;
}
.card .bottom-text:after {
  content: "";
  display: table;
  clear: both;
}
.card .bottom-text {
  display: none;
}
.card .bottom-text {
  display: block;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: -1px;
  right: -1px;
  padding: 10px 1px 5px 4px;
  text-align: left;
  -webkit-filter: blur(20px);
  filter: blur(20px);
  -webkit-transform: scale3d(.01, .01, 0) translateZ(0) perspective(500px);
  transform: scale3d(.01, .01, 0) translateZ(0) perspective(500px);
  opacity: 0;
  border-radius: 50px;
  -webkit-transition: opacity .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), bottom .25s cubic-bezier(.33, .04, .63, .93), bottom .25s cubic-bezier(.33, .04, .63, .93), background-color .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), border-radius .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), -webkit-transform .25s ease-in, -webkit-filter .25s ease-in;
  transition: opacity .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), bottom .25s cubic-bezier(.33, .04, .63, .93), bottom .25s cubic-bezier(.33, .04, .63, .93), background-color .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), border-radius .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), -webkit-transform .25s ease-in, -webkit-filter .25s ease-in;
  transition: opacity .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), transform .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), filter .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), background-color .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), border-radius .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93);
  transition: opacity .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), transform .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), filter .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), background-color .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), border-radius .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), -webkit-transform .25s ease-in, -webkit-filter .25s ease-in;
}

.card:hover .bottom-text {
  background-color: #fff;
  -webkit-filter: inherit;
  filter: inherit;
  -webkit-transform: scaleX(1) translateZ(0) perspective(0);
  transform: scaleX(1) translateZ(0) perspective(0);
  opacity: .99;
  z-index: 2;
  border-radius: 0;
  -webkit-transition: opacity .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), bottom .25s cubic-bezier(.33, .04, .63, .93), bottom .25s cubic-bezier(.33, .04, .63, .93), background-color .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), border-radius .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), -webkit-transform .25s ease-in, -webkit-filter .25s ease-in;
  transition: opacity .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), bottom .25s cubic-bezier(.33, .04, .63, .93), bottom .25s cubic-bezier(.33, .04, .63, .93), background-color .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), border-radius .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), -webkit-transform .25s ease-in, -webkit-filter .25s ease-in;
  transition: opacity .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), transform .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), filter .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), background-color .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), border-radius .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93);
  transition: opacity .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), transform .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), filter .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), background-color .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), border-radius .25s ease-in, bottom .25s cubic-bezier(.33, .04, .63, .93), -webkit-transform .25s ease-in, -webkit-filter .25s ease-in;
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}
/*.card:hover .top-text {
  opacity: 0;
  display: none;
}*/
.card .bottom-text .btn {
  margin: 10px 0;
  text-align: left;
}
.card .bottom-text .btn a {
  text-decoration: none;
  background: #e74c3c;
  color: #f2f2f2;
  padding: 5px 8px;
  border-radius: 3px;
  display: inline-flex;
  transition: 0.2s;
}
.card .bottom-text .btn a:hover {
  transform: scale(0.9);
}
@media screen and (max-width: 978px) {
  .container {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .card {
    max-width: 700px;
    margin: 20px 0;
  }
}

Full HTML Code

In this section we will add some more Card UI.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Card UI Card Design | </title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container mt-5">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 ">
      <div class="card mb-4">
        <div class="img"> <img src="profile-3.jpeg"> </div>
        <div class="top-text pt-2">
          <div class="title">
            <h3>HTML CSS Tutorials</h3>
          </div>
          <p><span>HTML</span> <span>CSS</span> <span>Javascript</span></p>
        </div>
        <div class="bottom-text pt-2">
          <div class="title">
            <h3>HTML CSS Tutorials</h3>
          </div>
          <p><span>HTML</span> <span>CSS</span> <span>Javascript</span></p>
          <div class="watch">
            <a href="#" class="btn-w"><i class="fad fa-play"></i> Watch</a>
			   <a href="#" class="share"><i class="fad fa-share-alt"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 ">
      <div class="card mb-4">
        <div class="img"> <img src="profile-3.jpeg"> </div>
        <div class="top-text pt-2">
          <div class="title">
            <h3>Web Designing</h3>
          </div>
           <p><span>HTML</span> <span>CSS</span> <span>Javascript</span></p>
        </div>
        <div class="bottom-text pt-2">
          <div class="title">
            <h3>Web Designing</h3>
          </div>
          <p><span>HTML</span> <span>CSS</span> <span>Javascript</span></p>
          <div class="watch">
            <a href="#" class="btn-w"><i class="fad fa-play"></i> Watch</a>
			   <a href="#" class="share"><i class="fad fa-share-alt"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 ">
      <div class="card mb-4">
        <div class="img"> <img src="profile-3.jpeg"> </div>
        <div class="top-text pt-2">
          <div class="title">
            <h3>Web Development</h3>
          </div>
          <p><span>HTML</span> <span>CSS</span> <span>Javascript</span></p>
        </div>
        <div class="bottom-text pt-2">
          <div class="title">
            <h3>Web Development</h3>
          </div>
          <p><span>HTML</span> <span>CSS</span> <span>Javascript</span></p>
          <div class="watch">
            <a href="#" class="btn-w"><i class="fad fa-play"></i> Watch</a>
			   <a href="#" class="share"><i class="fad fa-share-alt"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 ">
      <div class="card mb-4">
        <div class="img"> <img src="profile-3.jpeg"> </div>
        <div class="top-text pt-2">
          <div class="title">
            <h3>Wordpress</h3>
          </div>
          <p><span>HTML</span> <span>CSS</span> <span>Javascript</span></p>
        </div>
        <div class="bottom-text pt-2">
          <div class="title">
            <h3>Wordpress</h3>
          </div>
         <p><span>HTML</span> <span>CSS</span> <span>Javascript</span></p>
          <div class="watch">
            <a href="#" class="btn-w"><i class="fad fa-play"></i> Watch</a>
			   <a href="#" class="share"><i class="fad fa-share-alt"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Hope this article will help you to create an attractive Card UI using HTML and CSS hover effect.