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 card being one of them.
In this article, we will learn how to create a Profile Card Hover Effect using CSS.
- 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;
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.