Profile Card Zoom Animation :hover effect using HTML CSS

Namaste!

Table of Contents

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!