Profile card hover effect HTML CSS

Hello everyone, In this post, we will learn how to create a profile card hover effect using HTML and CSS only. In the last post, we discussed how to create a Bouncing ball animation Html CSS. But now at this moment let us see how to create a responsive profile card hover effect using HTML and CSS.

Profile card hovers effect:

As you can see we have taken three images for showing the profile card hover effect. Multiple images can be placed instead of three images. All of them have the same size and the same hover effect. For the arrangement of these images in a row, we have used the flex property. Grid and flex are two properties and you can use them on your web pages as well. Companies show it to their customers so, that they can feel secure. It has a piece of brief information about that worker and all the basic information about that member.

Screenshot 2021 12 19 103804
On Hover

As you can see in the image we have created a profile card for different employees of the company. It has a hover effect.

You might like it:

How to create a Profile card hover effect?

We can create it in three steps and it is so simple to create it. IDE is a code editor and it provides the environment to write the code of any programming language. You can use notepad, vs code or sublime text 3, etc.

Source code of HTML:

It’s a markup language and it is used to create the content/skeleton of the project or design. Its code is given below and you can copy it for your use and use it in your Html file.

Source code of CSS:

It is also a markup language and we use it to design our project. The code for design is given below and you can design the profile card if you are gonna use this code along with HTML code.

Download source code:

In some cases, people don’t know how to create new HTML and CSS files and don’t know how to connect them with each other. For those, we have created a file and in this file all the necessary files are present. You can access it from the below download button.


As you have seen the hover effect on the three images. They are positioned using flex property. Now your job is to increase the number of images to six. Then show them in a slider and apply the hover effect on all of them. Multiple properties are there for images and you can use them for image modification.

If you have any type of query then comment below and we will try our best to answer your problem.

Thanks for reading this article.

Download Source CodeClick to Download

Latest Post
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x