Card HTML CSS Responsive

Hello friends. In this blog, we are going to share another CSS animation snippet about CSS cards design. This HTML CSS card will nice hover animation where text will appear from the left side when we hover over the cards. Before getting the source code please watch the video tutorial below. The video will help you to understand the code. We have 1000+ front-end related videos on our youtube channel. If you are interested in front-end development please subscribe to this channel.

Hello friends. In this blog, we are going to share another CSS animation snippet about CSS cards design. This HTML CSS card will have a nice hover animation where text will appear from the left side when we hover over the cards. Before getting the source code please watch the video tutorial below. The video will help you to understand the code. We have 1000+ front-end related videos on our youtube channel. If you are interested in front-end development please subscribe to this channel.

I hope you watched the video tutorial. CSS cards or CSS profile cards are used to introduce the important people of any company to the website visitors. It increases the trustworthiness of that company. In the project, we have used the CSS flexbox grid to align the boxes and simple CSS rules to style all the elements. You can easily understand the code if you watch the video tutorial above.

Simple CSS profile Card [ Source Code ]:

At first, make one HTML file with .html extension and one CSS file with .css extension. Link the external CSS in your HTML file. After that, copy the code below and paste them into your project. If you are having a problem with the code below, you can also download the code from the download button below.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple CSS Profile Card | How To Create a Profile Card</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron&family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="team">
        <div class="team-area">
            <div class="single-team">
                <img src="img/1.jpg" alt="">
                <div class="info">
                    <h3>Person One</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, eum!</p>
                </div>
            </div>

            <div class="single-team">
                <img src="img/2.jpg" alt="">
                <div class="info">
                    <h3>Person Two</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, eum!</p>
                </div>
            </div>

            <div class="single-team">
                <img src="img/3.jpg" alt="">
                <div class="info">
                    <h3>Person Three</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, eum!</p>
                </div>
            </div>


            
        </div>
    </div>

</body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}
body{
    width: 100%;
    min-height: 100vh;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.team{
    width: 80%;
    height: auto;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.team-area{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}
.single-team{
    width: 320px;
    height: 420px;
    overflow: hidden;
    position: relative;
    margin: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, 
                rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.single-team::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
    opacity: 0;
}
.single-team:hover:after{
    position: absolute;
    content: '';     
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
    opacity: 1;
    transform: translateY(0);
    background: linear-gradient(45deg, rgba(0, 108, 255, 0.8) 20%, rgba(0, 108, 255, 0));
    z-index: 2;
}
.single-team img{
    height: auto;
    transition: all 0.5s ease;
    width: 100%;
    height: auto;
    object-fit: cover;
    min-height: 100%;    
}
.single-team:hover img{
    transform: scale(1.3) translate(5%, 5%);
}
.single-team .info {
    overflow: hidden;
	transform: translateX(-110%);
	transition: all 0.5s ease;
	position: absolute;
	left: 5%;
	right: 5%;
	bottom: 5%;
	padding: 5px 15px;
	border-left: 3px solid #ffffff;
	border-radius: 15px 0 0 15px;
	color: #ffffff;
	z-index: 3;
	opacity: 0;
	
}
.single-team:hover .info{
    opacity: 1;
    transform: translateX(0);
}
.info h3{
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;    
}
.info p{
    font-size: 12px;
    line-height: 20px;
}
.info h3, 
.info p{
    transition: all 0.7s ease;
    transform: translateX(-100%);   
    overflow: hidden;
}
.single-team:hover .info h3, 
.single-team:hover .info p{
    transform: translateX(0);
}

I hope you have successfully implemented the code. We regularly share front-end related codes in this blog. So keep visiting this website to get the latest source code. Also, please share the articles with like-minded people. Learn yourself and help others to learn as well. Thank you for visiting our blog.

DOWNLOAD CODE

Simple CSS profile Card [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Card HTML CSS Responsive

Simple CSS profile Card [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form