Profile Card Zoom Animation :hover effect using HTML CSS

A cool profile card image zoom hover animation where image contrast also changes.

Namaste!

Profile Card Zoom Animation :hover effect

A cool profile card image zoom hover animation where image contrast also changes.

followed simple steps like image, container positioning, and then text background and transform property and hover animation with image contrast changing and scale changing property.

Done!

Profile Card Zoom Animation YouTube Tutorial

Profile Card Zoom Animation :hover effect

Profile Card Zoom Animation Source Code Free

Just put the below code inside your code files and enjoy cool CSS animation

.html file code

Replace below code inside your <body> Your Code Here </body> tags

<div class="container">
        <div class="card">
            <img src="denny.jpg">
            <h5>Business Management</h5>
            <h3>Denny Soure</h3>

        </div>
    </div>

.css file code

And put below code inside your <style> Your Code Here </style> tags

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    background-color: #5ca3ff;
}

.container {
    width: 320px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 50px;
}

.card {
    width: 100%;
    height: 450px;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 35px 65px rgb(6, 34, 70, 0.6);
}

.card img {
    width: 100%;
    transition: 0.5s;
}

h3 {
    background-color: #5ca3ff;
    width: 60%;
    padding: 10px 0;
    color: #fff;
    text-align: center;
    position: absolute;
    bottom: 80px;
    right: -65%;
    transition: 0.3s;
    letter-spacing: 1px;
    font-size: 20px;
    font-weight: 600;
    transform: skew(-5deg);
}

h5 {
    background-color: #fff;
    padding: 12px 0;
    width: 80%;
    text-align: center;
    font-size: 16px;
    letter-spacing: 0.5px;
    position: absolute;
    right: -85%;
    bottom: 37px;
    transition: 0.3s;
    transform: skew(-5deg);
}

.card:hover h3,
.card:hover h5 {
    right: -2%;
}

.card:hover img {
    transform: scale(1.15);
    filter: contrast(120%);
}

Thank You!

Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 39

Leave a Reply

Your email address will not be published. Required fields are marked *

I'm not a robot *Time limit exceeded. Please complete the captcha once again.

Website Design Trends in 2022 5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games