Skype: BajarangiSoft +91 8690585687



How To Make Animation Profile Card Using CSS And Bootstrap Part-7

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

We made an Animated Profile Card with Hover Animation using HTML CSS. here we also created animation background hover effects in card the image with contents and animated icons.

How-To-Make-Animation-Profile-Card-Using-CSS-And-Bootstrap-part-seven

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;
    min-width: 350px;
    max-width: 350px;
    background-color: #fff;
    background-clip: border-box;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.2);
    border-radius: 0;
    border: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    margin: 50px 0;
}

.bs-card .card:hover {
    transform: translateY(-5px) scale(1.005) translateZ(0);
}

.bs-card .card .card-overlay {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.bs-card .card .card-overlay span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #000;
    transition: width 0.5s, height 0.5s;
    z-index: 0;
}

.bs-card .card:hover .card-overlay span {
    width: 1000px;
    height: 1000px;
}

.bs-card .card .card-img {
    position: relative;
    padding: 15px;
    width: 80%;
    margin: -60px auto 0;
    border: 1px solid #545557;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

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

.bs-card .card .card-img img {
    width: 100%;
    height: auto;
}

.bs-card .card .card-body {
    padding: 20px 10px 5px;
}

.bs-card .card .card-body .card-title {
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.bs-card .card .card-body .card-title h5 {
    text-transform: uppercase;
    text-align: center;
    color: #545557;
}

.bs-card .card:hover .card-body .card-title h5 {
    color: #fff;
}

.bs-card .card .card-body .card-description {
    position: relative;
    z-index: 1;
}

.bs-card .card .card-body .card-description p {
    font-weight: 300;
    font-size: 15px;
    color: #000000e3;
    text-align: center;
}

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

.bs-card .card .card-body .card-share ul {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bs-card .card .card-body .card-share ul li {
    position: relative;
    display: inline-block;
    margin: 10px;
    z-index: 1;
}

.bs-card .card .card-body .card-share ul li a i {
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    font-size: 20px;
    color: #545557;
}

.bs-card .card:hover .card-body .card-share ul li a i {
    border: 1px solid;
}

.bs-card .card:hover .card-body .card-share ul li a i {
    color: #fff;
}

.bs-card .card .card-body .card-share ul li a i:hover {
    background: #fff;
    color: #000;
}

@media (max-width: 575px) {
    .bs-card .card .card-body .card-share ul li {
        margin: 3px;
    }
}

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

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">
    <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">
            <div class="card-overlay">
                <span></span>
            </div>
            <div class="card-img">
                <img src="images/team/image-1.jpg" alt="Not Images" />
            </div>
            <div class="card-body">
                <div class="card-title">
                    <h5>Lisy Johnson</h5>
                </div>
                <div class="card-description">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation est laborum.
                    </p>
                </div>
                <div class="card-share">
                    <ul>
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-overlay">
                <span></span>
            </div>
            <div class="card-img">
                <img src="images/team/image-2.jpg" alt="Not Images" />
            </div>
            <div class="card-body">
                <div class="card-title">
                    <h5>Lisy Johnson</h5>
                </div>
                <div class="card-description">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation est laborum.
                    </p>
                </div>
                <div class="card-share">
                    <ul>
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-overlay">
                <span></span>
            </div>
            <div class="card-img">
                <img src="images/team/image-3.jpg" alt="Not Images" />
            </div>
            <div class="card-body">
                <div class="card-title">
                    <h5>Lisy Johnson</h5>
                </div>
                <div class="card-description">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation est laborum.
                    </p>
                </div>
                <div class="card-share">
                    <ul>
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                    </ul>
                </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>
<script>
    $(document).ready(function(e){
        $(".card-overlay").on("mouseenter",function(e){
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;
            $(this).find("span").css({top:y, left:x});
        });

        $(".card-overlay").on("mouseout",function(e){
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;
            $(this).find("span").css({top:y, left:x});
        });
    });
</script>
</body>
</html>

 

Related Post
How To Create Design Card With Flutter Using Android
How To Align Buttons In Card Footer In Bootstrap
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 Animation Card With Hover Using CSS And Bootstrap