How to make Profile Card Hover Effect using CSS ?
Almost all of us must have heard that ‘the first impression is the last impression’. The profile card carries the most important details we should know about a person at the very first instant. A better impression attracts more traffic. So to engage more audience in a website it is very important to concentrate on designing every small part of it. Profile cards being one of them.
In this article, we will learn how to create a Profile Card Hover Effect using CSS.
Approach:
- At first, we create the basic HTML template (index.html) to insert the image and profile.
- We have an HTML div with a “card” class. Inside the div, we have an image with class “img-box” and the profile name and designation of the account holder with class “info”.
- This profile card image is used.
- We include the “style.css” in “index.html” file that contains all the CSS styles.
- We need to import the following google font URL in our CSS file for font-family: ‘Merriweather’, serif;
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap");
Example: The image will move up and the profile name with designation will show up. There is also a button to contact the user.
HTML
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >Profile Card</ title >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "card" >
< div class = "img-box" >
< img src =
alt = "profile pic" >
</ div >
< div class = "info" >
< h2 >Profile Card</ h2 >
< p >Web Designer | Influencer</ p >
< button >Contact Me</ button >
</ div >
</ div >
</ body >
</ html >
|
CSS code: The following CSS code (style.css) will bring the hover effect to this profile card. The following code is used in the above HTML file
CSS
* {
margin : 0 ;
padding : 0 ;
box-sizing: border-box;
}
body {
height : 100 vh;
background : rgb ( 11 , 80 , 136 );
display : flex;
justify- content : center ;
align-items: center ;
font-family : 'Merriweather' , serif ;
}
.card {
width : 320px ;
height : 400px ;
background-color : white ;
border-radius: 8px ;
position : relative ;
}
.img-box {
position : absolute ;
top : 10px ;
bottom : 10px ;
right : 10px ;
left : 10px ;
background-color : white ;
transition: 0.5 s;
z-index : 2 ;
}
.card:hover .img-box {
top : 10px ;
bottom : 125px ;
right : 10px ;
left : 10px ;
}
.card:hover img {
border-radius: 10px ;
}
img {
width : 100% ;
height : 100% ;
position : absolute ;
object-fit: cover;
}
.info {
position : absolute ;
bottom : 40px ;
right : 10px ;
left : 10px ;
text-align : center ;
height : 80px ;
}
h 2 {
font-weight : bold ;
color : rgb ( 51 , 50 , 50 );
}
p {
color : rgb ( 197 , 74 , 111 );
}
button {
position : absolute ;
background-color : rgb ( 11 , 80 , 136 );
border : none ;
border-radius: 10px ;
text-align : center ;
left : 75px ;
margin : 8px ;
font-size : 20px ;
padding : 10px 15px ;
color : wheat;
font-family : 'Merriweather' , serif ;
cursor : pointer ;
}
|
Output: Now, as you can see in the output, we have created a beautiful profile card hover effect, which will attract more readers to read the contents of particular writers/influencers more on the dedicated webpage.
Last Updated :
05 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...