In this tutorial we will see how to make a Profile Card 2 With Hover Effect using HTML and CSS. Pure CSS is used for this purpose, Both HTML and CSS code is given, feel free to use it in your projects.
Table of Contents
HTML Code
HTML Code is given below.
<div class="box">
<h1 class="title">Elon Musk</h1>
<div class="social">
<i class="icon fab fa-instagram"></i>
<i class="icon fab fa-twitter"></i>
<i class="icon fab fa-facebook-square"></i>
</div>
</div>
CSS Code
CSS Code is given below.
body
{
background-color: #555;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'Barlow Condensed' , sans-serif;
}
.box
{
height: 250px;
width: 250px;
border-radius: 10px;
padding: 5px 10px;
background-color: #000;
box-sizing: border-box;
background-image: url('picture.png');
background-size: 100%;
background-repeat: no-repeat;
transition: 1s;
box-shadow: 0px 0px 5px 1px #000;
position: relative;
cursor: pointer;
}
.title
{
text-align: center;
color: #ccc;
opacity: 0;
font-size: 25px;
transition: 1s;
}
.social
{
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
width: 100%;
padding: 5px 0px;
}
.icon
{
color: #ccc;
margin: 0px 5px;
font-size: 14px;
transition: 1s;
opacity: 0;
}
.box:hover
{
background-size:300px;
background-position: -200% 50%;
box-shadow:
0px 0px 5px 2px #000000,
0px 0px 10px 10px #ff05e2;
}
.box:hover .title
{
opacity: 1;
}
.box:hover .icon
{
opacity: 1;
}
Demo
Video Tutorial
Watch our video tutorial on how to make a Profile Card 2 With Hover Effect using HTML and CSS.