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.

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

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.