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.
<!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
/* Filename:style.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 ;
} /* Profile card making starts here */ .card { width : 320px ;
height : 400px ;
background-color : white ;
border-radius: 8px ;
position : relative ;
} /* Contains the image */ .img-box { position : absolute ;
top : 10px ;
bottom : 10px ;
right : 10px ;
left : 10px ;
background-color : white ;
transition: 0.5 s;
z-index : 2 ;
} /* The image dimensions changes on hover and the underlaying information shows up*/
.card:hover .img-box { top : 10px ;
bottom : 125px ;
right : 10px ;
left : 10px ;
} /* Image radius changes on hover*/ .card:hover img { border-radius: 10px ;
} /* The image */ img { width : 100% ;
height : 100% ;
position : absolute ;
object-fit: cover;
} /* Contains the name, designation and a button to contact */ .info { position : absolute ;
bottom : 40px ;
right : 10px ;
left : 10px ;
text-align : center ;
height : 80px ;
} /* Style the name*/ h 2 {
font-weight : bold ;
color : rgb ( 51 , 50 , 50 );
} /* Style the paragraph which contains the designation */ p { color : rgb ( 197 , 74 , 111 );
} /* The button to contact */ 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.