The CSS code snippet helps you to create cards with text summary that is revealed on the hover effect. The card element is given a fixed size and a background image with a semi-transparent black overlay. It has a box-shadow effect and transitions applied on hover. There are three social different elements that contain social media buttons such as comment, heart, and share.
Additionally, the card title and details sections are hidden by default and are revealed with transitions when the card has hovered. This layout can be used for displaying various types of content such as blog posts, product information, or news articles. Text summary cards modify the styles and content of the cards to suit their specific needs.
How to Create CSS Cards with Text Summary on Hover Effect
First of all, load the Google Fonts and Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
Now, create the HTML structure for cards as follows:
<!--
Material Cards Designed especiall for Posts with an Image and Post Information, Along with social buttons.
Responsive using flexbox.
Pure CSS, No JS
Images Used in Pen are Not Mine :
They are of Creative Artist from Dribbble
-Marko Stupic : https://dribbble.com/sweetness-every-day
-->
<div class="card-container">
<div class="card">
<div class="card-image"></div>
<div class="card-info">
<div class="card-title">Hie</div>
<div class="card-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis beatae nisi soluta ex animi aperiam iste voluptatem, voluptatibus impedit rem natus doloribus sed ullam provident sunt odit eaque excepturi modi.</div>
</div>
<div class="card-social">
<ul>
<li><i class="fa fa-comment-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-heart-o" aria-hidden="true"></i></li>
<li><i class="fa fa-share-alt" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-image"></div>
<div class="card-info">
<div class="card-title">Hello</div>
<div class="card-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis beatae nisi soluta ex animi aperiam iste voluptatem, voluptatibus impedit rem natus doloribus sed ullam provident sunt odit eaque excepturi modi.</div>
</div>
<div class="card-social">
<ul>
<li><i class="fa fa-comment-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-heart-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-alt" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-image"></div>
<div class="card-info">
<div class="card-title">How are you ?</div>
<div class="card-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis beatae nisi soluta ex animi aperiam iste voluptatem, voluptatibus impedit rem natus doloribus sed ullam provident sunt odit eaque excepturi modi.</div>
</div>
<div class="card-social">
<ul>
<li><i class="fa fa-comment-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-heart-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-alt" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-image"></div>
<div class="card-info">
<div class="card-title">What's Up ?</div>
<div class="card-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis beatae nisi soluta ex animi aperiam iste voluptatem, voluptatibus impedit rem natus doloribus sed ullam provident sunt odit eaque excepturi modi.</div>
</div>
<div class="card-social">
<ul>
<li><i class="fa fa-comment-o" aria-hidden="true"></i></li>
<li><i class="fa fa-heart-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-alt" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</div>
Style the cards using the following CSS styles:
body {
background: rgba(0, 0, 255, 0.5);
}
.card-container {
position: relative;
flex-wrap: wrap;
overflow: hidden;
padding-top: 15px;
padding-bottom: 15px;
display: flex;
justify-content: space-around;
align-items: auto;
}
.card {
min-width: 275px;
width: 275px;
position: relative;
margin: 15px 15px;
height: 350px;
border-radius: 7px;
background-size: cover;
background: rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.3);
transition: 0.2s all linear;
border: 1px solid rgba(128, 128, 128, 0.15);
box-sizing: border-box;
}
.card .card-social {
position: absolute;
height: 75px;
width: 100%;
background: red;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background: rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
top: 275px;
}
.card .card-social ul {
padding: 0;
margin: 0;
list-style: none;
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
}
.card .card-social ul li {
height: 100%;
text-align: center;
line-height: 75px;
font-size: 1.5em;
color: rgba(255, 255, 255, 0.85);
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.card .card-social ul li:hover {
text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.7);
transition: all 0.1s linear;
}
.card .card-image {
width: 100%;
height: 275px;
position: relative;
background-image: url("https://d13yacurqjgara.cloudfront.net/users/150724/screenshots/2211976/365_the_end_1x.png");
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.card .card-info {
position: relative;
width: 100%;
height: 35px;
line-height: 35px;
top: -265px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
font-family: "Open Sans";
color: rgba(255, 255, 255, 0.85);
}
.card .card-info .card-title {
line-height: 35px;
height: 35px;
position: relative;
top: 0px;
font-size: 25px;
text-align: center;
background: rgba(0, 0, 0, 0.6);
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
}
.card .card-info .card-detail {
line-height: 1.5em;
font-size: 1em;
height: 220px;
background: rgba(0, 0, 0, 0.6);
position: relative;
top: 5px;
padding: 5px 20px 0px 20px;
opacity: 0;
transform: scaleY(0);
transform-origin: center top;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
}
.card:hover {
box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, 0.3);
}
.card:hover .card-info .card-title {
box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, 0.3);
transition: 0.3s all linear;
}
.card:hover .card-info .card-detail {
opacity: 1;
box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, 0.3);
transition: 0.35s all linear;
transition-delay: 0.1s;
transform: scaleY(1);
}
.card:nth-of-type(2) .card-image {
background-image: url("https://d13yacurqjgara.cloudfront.net/users/150724/screenshots/2164720/337_writing_blog_post_1x.png");
}
.card:nth-of-type(3) .card-image {
background-image: url("https://d13yacurqjgara.cloudfront.net/users/150724/screenshots/2377046/kaylo_ren_lighsaber_800x600_1x.png");
}
.card:nth-of-type(4) .card-image {
background-image: url("https://d13yacurqjgara.cloudfront.net/users/150724/screenshots/2203790/362_chasing_dreams_1x.png");
}
Add the following JavaScript function:
// No JS ;)
That’s all! hopefully, you have successfully created cards with text summary on hover. If you have any questions or suggestions, feel free to comment below.
