Skype: BajarangiSoft +91 8690585687



How To Make Animation Rating Card With Icons Using CSS And Bootstrap

admin_img Posted By Bajarangi soft , Posted On 28-01-2021

Animated rating card we made with hover effects. Here you can see we created some animated rating cards of hotel booking.

How To Make Animation Rating Card With Icons Using CSS And Bootstrap

Step 1:Create css file like style.css
  

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&family=Slabo+27px&display=swap");

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

body {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-style: normal;
}

a,
a:hover,
a:focus,
a:active,
a:link {
    outline: none;
    text-decoration: none;
    color: #000;
}

.bs-card {
    position: relative;
    padding: 100px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.bs-card .card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-width: 350px;
    max-width: 350px;
    height: 350px;
    background-color: #fff;
    background-clip: border-box;
    transform-style: preserve-3d;
    border-radius: 20px;
    border: 1px solid #ddd;
    overflow: hidden;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    margin: 25px 0;
}

.bs-card .card .card-content {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}

.bs-card .card .card-more {
    display: none;
}
.bs-card .card .card-more:checked ~ .card-content {
    transform: rotateY(180deg);
}

.bs-card .card .card-front,
.bs-card .card .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
    text-align: center;
    padding: 50px 20px 20px;
    border-radius: 20px;
}

.bs-card .card .card-front {
    background-position: center center;
    background-size: cover;
    z-index: 2;
}

.bs-card .card .card-front.box-1 {
    background-image: linear-gradient(to right, #0f15e359, #d90add59), url(../images/card/image-4.jpg);
}

.bs-card .card .card-front.box-2 {
    background-image: linear-gradient(to right, #0f15e359, #d90add59), url(../images/card/image-5.jpg);
}

.bs-card .card .card-front.box-3 {
    background-image: linear-gradient(to right, #0f15e359, #d90add59), url(../images/card/image-6.jpg);
}

.bs-card .card .card-front .card-title {
    margin-bottom: 0;
    margin-top: 50px;
}

.bs-card .card .card-front .card-title h5 {
    text-transform: uppercase;
    font-weight: 500;
    color: #fff;
}

.bs-card .card .card-front .card-icon {
    line-height: 50px;
}

.bs-card .card .card-front .card-icon i {
    font-size: 25px;
    color: #ffffff;
}

.bs-card .card .card-content .card-back {
    transform: rotateY(180deg);
    background-color: #fff;
    border: 10px solid #ddd;
    border-radius: 20px;
}

.bs-card .card:hover .card-content .card-back {
    background-position: center center;
    background-size: cover;
    z-index: 2;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.bs-card .card:hover .card-content .card-back.box-1 {
    background-image: linear-gradient(to right, #0f15e359, #d90add59), url(../images/card/image-1.jpg);
}

.bs-card .card:hover .card-content .card-back.box-2 {
    background-image: linear-gradient(to right, #0f15e359, #d90add59), url(../images/card/image-2.jpg);
}

.bs-card .card:hover .card-content .card-back.box-3 {
    background-image: linear-gradient(to right, #0f15e359, #d90add59), url(../images/card/image-3.jpg);
}

.bs-card .card .card-back .card-body-flex {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.bs-card .card .card-back .card-body-flex .card-info {
    width: 80px;
    padding-bottom: 5px;
    border-bottom: 1px solid #000000c4;
}

.bs-card .card:hover .card-back .card-body-flex .card-info {
    border-color: #fff;
}
.bs-card .card .card-back .card-body-flex .card-info span {
    font-weight: 600;
    font-size: 18px;
    color: #000000c4;
}

.bs-card .card:hover .card-back .card-body-flex .card-info span {
    color: #fff;
}

.bs-card .card .card-back .card-body-flex .card-info .card-icon i {
    font-size: 25px;
    color: #000000c4;
}

.bs-card .card:hover .card-back .card-body-flex .card-info .card-icon i {
    font-size: 25px;
    color: #fff;
}

.bs-card .card .card-back .card-body-flex .card-info h6 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 15px;
    color: #000000c4;
}

.bs-card .card:hover .card-back .card-body-flex .card-info h6 {
    color: #fff;
}

.bs-card .card .card-content .card-back .card-description {
    margin: 15px 0;
}

.bs-card .card .card-content .card-back .card-description p {
    text-align: justify;
    font-size: 14px;
    color: #000000c4;
}

.bs-card .card:hover .card-content .card-back .card-description p {
    color: #fff;
}

.bs-card .card .card-front .bs-btn,
.bs-card .card .card-back .bs-btn {
    position: relative;
    line-height: 40px;
    min-width: 120px;
    max-width: 120px;
    display: inline-block;
    text-transform: uppercase;
    background: none;
    border: solid 2px #fff;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    z-index: 1;
}

.bs-card .card .card-back .bs-btn i {
    font-size: 20px;
}

.bs-card .card .card-front .bs-btn:hover {
    background: #fff;
    color: #000000c4;
}

.bs-card .card .card-back .bs-btn {
    border-color: #000000c4;
    color: #000000c4;
}

.bs-card .card:hover .card-back .bs-btn {
    border-color: #fff;
    color: #fff;
}

.bs-card .card .card-back .bs-btn:hover {
    background: #fff;
    color: #000000c4;
}

@media (max-width: 320px) {
    .bs-card .card .card-back .card-body-flex .card-info {
        width: auto;
    }

    .bs-card .card .card-content .card-back .card-description p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
    }
}

@media (max-width: 375px) {
    .bs-card .card {
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .bs-card .card .card-front,
    .bs-card .card .card-back {
        padding: 25px 20px 20px;
    }
}

Step 2:Create html file like index.html and import style.css in it.
  
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <title>card hover</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<!-- container -->
<div class="container">
    <section class="bs-card">
        <div class="card">
            <input type="checkbox" id="card-1" class="card-more">
            <div class="card-content">
                <div class="card-front box-1">
                    <div class="card-title">
                        <h5>new hotel booking</h5>
                    </div>
                    <div class="card-icon">
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <label for="card-1" class="bs-btn" aria-hidden="true">
                        Details
                    </label>
                </div>

                <div class="card-back box-1">
                    <div class="card-body-flex">
                        <div class="card-info">
                            <span>5</span>
                            <div class="card-icon">
                                <i class="fa fa-users"></i>
                            </div>
                            <h6>People</h6>
                        </div>

                        <div class="card-info">
                            <span>4</span>
                            <div class="card-icon">
                                <i class="fas fa-door-open"></i>
                            </div>
                            <h6>rooms</h6>
                        </div>

                        <div class="card-info">
                            <span>2</span>
                            <div class="card-icon">
                                <i class="fa fa-bed"></i>
                            </div>
                            <h6>bads</h6>
                        </div>
                    </div>

                    <div class="card-description">
                        <p>Lorem Ipsum is simply with the  containing and more recently with desktop PageMaker including versions of Lorem Ipsum.</p>
                    </div>

                    <label for="card-1" class="bs-btn" aria-hidden="true">
                        <i class="fa fa-hand-o-left"></i>
                    </label>
                </div>
            </div>
        </div>

        <div class="card">
            <input type="checkbox" id="card-2" class="card-more">
            <div class="card-content">
                <div class="card-front box-2">
                    <div class="card-title">
                        <h5>new hotel booking</h5>
                    </div>
                    <div class="card-icon">
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <label for="card-2" class="bs-btn" aria-hidden="true">
                        Details
                    </label>
                </div>

                <div class="card-back box-2">
                    <div class="card-body-flex">
                        <div class="card-info">
                            <span>5</span>
                            <div class="card-icon">
                                <i class="fa fa-users"></i>
                            </div>
                            <h6>People</h6>
                        </div>

                        <div class="card-info">
                            <span>4</span>
                            <div class="card-icon">
                                <i class="fas fa-door-open"></i>
                            </div>
                            <h6>rooms</h6>
                        </div>

                        <div class="card-info">
                            <span>2</span>
                            <div class="card-icon">
                                <i class="fa fa-bed"></i>
                            </div>
                            <h6>bads</h6>
                        </div>
                    </div>

                    <div class="card-description">
                        <p>Lorem Ipsum is simply with the  containing and more recently with desktop PageMaker including versions of Lorem Ipsum.</p>
                    </div>

                    <label for="card-2" class="bs-btn" aria-hidden="true">
                        <i class="fa fa-hand-o-left"></i>
                    </label>
                </div>
            </div>
        </div>

        <div class="card">
            <input type="checkbox" id="card-3" class="card-more">
            <div class="card-content">
                <div class="card-front box-3">
                    <div class="card-title">
                        <h5>new hotel booking</h5>
                    </div>
                    <div class="card-icon">
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star "></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <label for="card-3" class="bs-btn" aria-hidden="true">
                        Details
                    </label>
                </div>

                <div class="card-back box-3">
                    <div class="card-body-flex">
                        <div class="card-info">
                            <span>5</span>
                            <div class="card-icon">
                                <i class="fa fa-users"></i>
                            </div>
                            <h6>People</h6>
                        </div>

                        <div class="card-info">
                            <span>4</span>
                            <div class="card-icon">
                                <i class="fas fa-door-open"></i>
                            </div>
                            <h6>rooms</h6>
                        </div>

                        <div class="card-info">
                            <span>2</span>
                            <div class="card-icon">
                                <i class="fa fa-bed"></i>
                            </div>
                            <h6>bads</h6>
                        </div>
                    </div>

                    <div class="card-description">
                        <p>Lorem Ipsum is simply with the  containing and more recently with desktop PageMaker including versions of Lorem Ipsum.</p>
                    </div>

                    <label for="card-3" class="bs-btn" aria-hidden="true">
                        <i class="fa fa-hand-o-left"></i>
                    </label>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- container end -->

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Related Post
Learn How To Create 5 Star Rating Bar In Flutter App
Simple Folding Cell Card Using Flutter Android App
How To Make Animation Product Card Using CSS And Bootstrap Part-1
How To Make Animation Profile Card Using CSS And Bootstrap Part-4
How To Make Animation Product Card With Icons Using CSS And Bootstrap
How To Make Animated Product Card Using CSS And Bootstrap Part-4