A profile card contains the person’s details like photo, name, contact icons, designation and their rating to the destination, and some other information about the person. A profile card is used as an identity of a specific person. By placing the profile card on the web page, the user can contact the person easily. A Profile Card with Hover Effect is that when you hover over the profile card it will show you the profile of the person.
In this blog(Profile Card with Hover Effect), there is a card at the center of the webpage, which contains the profile icon of the person, name, and designation. When you hover over the card, the profile icon of the person will be viewed with their name and destination. There is also a view more button, to view more details of the person. The Hover Effect has been used by CSS property.
The source code of the Profile Card with Hover Effect is given below, if you want the source code of this program, you can copy it. You can use this Profile Card with Hover Effect on your project.
Profile Card with Hover Effect [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name index.html and remember, you have to create a file with a .html extension.
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic);
html,
body {
background-color: #eee;
}
.transition {
transition: .3s cubic-bezier(.3, 0, 0, 1.3)
}
.card {
background-color: #fff;
height: 400px;
width: 300px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.card:hover {
box-shadow: 0px 30px 30px rgba(0,0,0,0.2);
height: 430px;
width: 330px;
}
.card_circle {
height: 400px;
width: 450px;
background: url(https://cdn.pixabay.com/photo/2016/11/14/17/39/person-1824144__340.png) no-repeat;
background-size: cover;
position: absolute;
border-radius: 50%;
margin-left: -75px;
margin-top: -270px;
}
.card:hover .card_circle {
border-radius: 0;
margin-top: -110px;
}
h2 {
text-align: center;
margin-top: 190px;
position: absolute;
z-index: 9999;
font-size: 26px;
color: #1261a0;
width: 100%;
font-family: 'Noto Sans', serif;
}
h2 small {
font-weight: normal;
font-size: 65%;
color: rgba(0,0,0,0.5);
}
.card:hover h2 {
margin-top: 140px;
color: #000;
}
.card:hover h2 small {
color: #000;
}
.cta-container {
text-align: center;
margin-top: 290px;
position: absolute;
z-index: 9999;
width: 100%;
font-family: 'Noto Sans', serif;
}
.cta {
color: #fff;
border: 2px solid #1261a0;
background-color: #1261a0;
padding: 10px 25px;
border-radius: 50px;
font-size: 17px;
text-decoration: none;
font-weight: bold;
}
.card:hover .cta-container {
margin-top: 320px;
}
.credit{
text-align: center;
color: #000;
margin: 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem creating this Profile Card with Hover Effect using HTML & CSS, then contact us or comment to us. We'll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team