content logo

Bootstrap Cards:

Custom Bootstrap Cards with Animating Texts

Appearance is such a huge game changer but it is often overlooked by web designers. A successful and lucrative website must be visually appealing to the visitors. The website is going to represent your company, business and even yourself so make sure it has a professional design and is aesthetically pleasing to the eye. Keep in mind that your website might be the first and only impression that a potential client receives of your business. One of the most popular elements to use in a website for added aesthetic and functionality is Bootstrap cards. You can use CSS card style to improve the look of your website by a great amount. For an even more significant result, you can use animating Bootstrap cards.

Below, we have a unique Bootstrap card style. It looks really simple at first but when you hover your mouse over an item, the box displays a set of animations and displays the information regarding that item. Besides the full description that you get, a small button containing the link to the respective page will appear at the bottom of the box as well so your users can instantly read more about it in case they were interested.

#

Bootstrap Card Style

#

CSS Card Style

#

Bootstrap Card

#

Animating Bootstrap Card

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class=" col-md-12">
        <div class="card-wrapper col-lg-4 col-md-6 col-xs-4">
            <div class="card" style="display:block">
                <div class="card-img-wrapper">
                    <img class="card-img-top" src="http://frontendfreecode.com/img/digitalcommercesoftwareplatform.jpg" alt="Card image cap">
                </div>
                <div class="card-body">
                    <h5 class="card-title">Special title treatment Special</h5>
                    <div class="card-content">
                        <p class="card-text">With supporting text below as a natural lead-in to additional content. With supporting text below as a natural</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
        <div class=" card-image-title-description col-lg-4 col-md-4 col-xs-4">
            <div class="card">
                <div class="card-img-wrapper">
                    <img class="card-img-top" src="http://frontendfreecode.com/img/digitalcommercesoftwareplatform.jpg" alt="Card image cap">
                </div>
                <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.card-wrapper {
    margin-bottom: 30px;
}
.card-image .card .card-img-wrapper {
    height: 100%;
}
.card-image .card .card-body {
    display: none;
}
.card-image-title-description .card .card-img-wrapper {
    max-height: 160px;
}
.card-image-title-description .card {
    position: relative;
    min-height: 300px;
}
.card-image-title-description .card .card-body {
    height: auto;
    position: relative;
    top: 0;
    margin-bottom: -70px;
}
.card-image-title-description .card:hover .card-body {
    top: -70px;
}
.card-image-title-description .card .card-body .card-title {
    margin-bottom: .75rem;
}
.card {
    display: inline-block;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    height: 100%;
}
.card:hover {
    box-shadow: 8px 12px 31px -10px #ab98ab;
}
.card-img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    overflow: hidden;
}
.card-img-wrapper img {
    transition: 1.5s ease;
}
.card:hover .card-img-wrapper img {
    transform: scale(1.15);
}
.card-body .card-title {
    margin-bottom: calc(50% + 20px);
    transition: 1.5s ease;
}
.card:hover .card-body .card-title {
    margin-bottom: .75rem;
}
.card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-color: #fff;
    transition: 1.5s ease;
}
.card-content {
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
    transition: 1.5s ease;
}
.card:hover .card-body {
    height: 80%;
}
.card:hover .card-content {
    bottom: 0;
}
body {
    margin: 0;
    background-image: linear-gradient(to right, #ECE9E6, #FFFFFF);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.card-wrapper {
    margin-bottom: 30px;
}
.card-image .card .card-img-wrapper {
    height: 100%;
}
.card-image .card .card-body {
    display: none;
}
.card-image-title-description .card .card-img-wrapper {
    max-height: 160px;
}
.card-image-title-description .card {
    position: relative;
    min-height: 300px;
}
.card-image-title-description .card .card-body {
    height: auto;
    position: relative;
    top: 0;
    margin-bottom: -70px;
}
.card-image-title-description .card:hover .card-body {
    top: -70px;
}
.card-image-title-description .card .card-body .card-title {
    margin-bottom: .75rem;
}
.card {
    display: inline-block;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    height: 100%;
}
.card:hover {
    box-shadow: 8px 12px 31px -10px #ab98ab;
}
.card-img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    overflow: hidden;
}
.card-img-wrapper img {
    transition: 1.5s ease;
}
.card:hover .card-img-wrapper img {
    transform: scale(1.15);
}
.card-body .card-title {
    margin-bottom: calc(50% + 20px);
    transition: 1.5s ease;
}
.card:hover .card-body .card-title {
    margin-bottom: .75rem;
}
.card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-color: #fff;
    transition: 1.5s ease;
}
.card-content {
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
    transition: 1.5s ease;
}
.card:hover .card-body {
    height: 80%;
}
.card:hover .card-content {
    bottom: 0;
}
body {
    margin: 0;
    background-image: linear-gradient(to right, #ECE9E6, #FFFFFF);
}
</style>

</head>
<body>
<div class="container">
    <div class=" col-md-12">
        <div class="card-wrapper col-lg-4 col-md-6 col-xs-4">
            <div class="card" style="display:block">
                <div class="card-img-wrapper">
                    <img class="card-img-top" src="http://frontendfreecode.com/img/digitalcommercesoftwareplatform.jpg" alt="Card image cap">
                </div>
                <div class="card-body">
                    <h5 class="card-title">Special title treatment Special</h5>
                    <div class="card-content">
                        <p class="card-text">With supporting text below as a natural lead-in to additional content. With supporting text below as a natural</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
        <div class=" card-image-title-description col-lg-4 col-md-4 col-xs-4">
            <div class="card">
                <div class="card-img-wrapper">
                    <img class="card-img-top" src="http://frontendfreecode.com/img/digitalcommercesoftwareplatform.jpg" alt="Card image cap">
                </div>
                <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </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