Open In App

How to make Profile Card Hover Effect using CSS ?

Last Updated : 05 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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




/* Filename:style.css */
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    height: 100vh;
    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.5s;
    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*/
h2 {
    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.



Similar Reads

Responsive Card with hover effect using HTML and CSS
Cards are very important part for any website. It is used to display some important information in short to viewers. So, in this article, we will create a responsive card with amazing hover effect using HTML and CSS. By using HTML we will design the basic structure of the card and then by using the properties of CSS, we can create the hover animati
4 min read
How to Design Hover Effect for Product Info Card using HTML & CSS ?
This project makes a Product info Card using HTML and CSS to display an image of the product, a description of the product, a button to order or purchase, a star rating of the product, etc. These help the users buy the product easily. There is a card at the center of the webpage. This product has a hover effect. When you hover the button, the icon
7 min read
Glassmorphism Card Hover Effect
Glassmorphism is a modern way of styling web-elements of any web-page and providing a 3D as well as a glass effect. This animation effect can be easily generated by using HTML, CSS, and Vanilla-tilt JS. We can implement Glassmorphism using various CSS properties. It is used to add a glass effect to the given element and Vanilla-tilt JS is used to p
3 min read
Light/Dark Mode User Profile Card using HTML CSS and JavaScript
This article will show how to make an Animated User Profile Card using HTML, CSS, and JavaScript. We generally see these effects in portfolios of professionals. In this, we have created a code that generates a personalized card with the user's name, image, and description. Additionally, we've implemented a hover function that resizes the card when
3 min read
Create a Toggle Profile Card Details using HTML CSS and JavaScript
In this article, we will develop an interactive Toggle Profile Card Details application using HTML, CSS, and JavaScript Language. In this application, we have a Card Component with the user's details like their profile picture and Name. There is a toggle button, and when the button is clicked, the detailed information of the user will be displayed
3 min read
How to create Responsive Profile Card using HTML and CSS ?
In this article, we are going to create a profile card from where a user can check out the basic details of other users and connect with them through different handles as well as message the user. Approach:Set up HTML with a container div containing an image and content sections.Style the container, user image, and content sections with appropriate
5 min read
Design a Social Media Profile Card using HTML CSS & JavaScript
To implement and Design a Social Media Profile Card using HTML CSS, and JavaScript language. In this application, we have created an attractive card component that represents the Social Media Profile information of the user. This information includes Profile Image, Name, Designation, Location, Followers, Following, and Social Media Handlers with th
4 min read
Underline Hover Animation Effect using Tailwind CSS
The Tailwind CSS underline animation is a visual effect that can be added to any text or heading or a specific word in the web page using the Tailwind CSS utility framework. The basic function of this effect is this creates an underline animation from left to right with a smooth transition, in simpler words it created underline animation whenever w
3 min read
How to create button hover animation effect using CSS ?
Minimal rotating backdrop button hovers and click animation is a basic CSS animation effect where when the button hovers, the button's background color changes, and when the button is clicked, it scales down slightly. This animation is implemented using CSS pseudo-elements and transitions. The ::selection pseudo-element is used to change the color
3 min read
How to create Skewed Background with hover effect using HTML and CSS?
The skewed background or you can say an angel color shade background can be created by using HTML and CSS. This background can be used as a cover pic of your website that will be attractive. In this article, we will create a simple skewed background. We will divide the article into two sections in the first section we will create the structure and
2 min read