CSS Profile Card Hover Effect.Today in this blog , we gonna learn about CSS Profile Card Hover Effect.
CSS Profile Card Hover Effect
Hi Friends!
Today in this blog, we gonna learn about CSS Profile Card Hover Effect. Button Border Animations, Button Neon Effects, and Button Hover Effects are one of the best attractive and clickable parts of the website. In Portfolio website's main part is Profile Card. I already uploaded some Profile Card Effect if you're a beginner let's go and learn it.
This Profile Card Hover Effect is nice to see on our Portfolio websites. In the previous blog, we will learn about CSS Creative Ball Animation if you're a beginner I will recommend learning Ball Animation first. If you're learning that and this blog will help you to learn about Profile Card Hover Effect. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css profile card hover effects</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="profile">
<img src="profile.jpg">
<div class="about">
<h1>Jack Smith</h1>
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
<span>Follow me</span>
</div>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with the extension .HTML . This extension is more important to create a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
.profile{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 400px;
width: 300px;
border-radius: 20px;
box-shadow: 1px 1px 60px black;
cursor: pointer;
}
img{
height: 120px;
width: 120px;
border-radius: 50%;
}
.about{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 15px;
font-family: sans-serif;
color: white;
margin: 10px;
padding: 10px;
}
h1{
margin: 15px;
font-size: 40px;
}
.icons{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
font-size: 20px;
}
i{
display: block;
padding: 10px;
border-radius: 50%;
background-color: white;
color: black;
}
span{
position: relative;
top: 20px;
font-size: 20px;
font-weight: bold;
font-family: cursive;
color: white;
padding: 5px 10px;
border: 2px solid white;
border-radius: 20px;
}
i:hover{
transition: 0.5s;
transform: translateY(-10px);
box-shadow: 1px 1px 40px white;
}
span:hover{
transition: 0.5s;
background-color: white;
color: black;
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called .CSS . This will help you to design your webpage. If you want more clear on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn the all Profile Card Hover Effect to develop your portfolio website. repeat the code for your practice this will help you to learn this Profile Card Hover Effect more effectively and This video is also helpful to learn faster. Profile Card Hover Effects are one of my favorite parts of CSS effects. I hope this tutorial will be helpful for learning Profile Card Hover Effect. I will give you Source Code and you can download it.
COMMENTS