Card Design

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.

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:

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.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>FantacyDesigns | Profile Card Hover </title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <div class="container">
  <div class="card card0">
    <div class="border">
      <h2>Al Pacino</h2>
      <div class="icons">
        <i class="fa fa-codepen" aria-hidden="true"></i>
        <i class="fa fa-instagram" aria-hidden="true"></i>
        <i class="fa fa-dribbble" aria-hidden="true"></i>
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-facebook" aria-hidden="true"></i>
      </div>
    </div>
  </div>
  <div class="card card1">
    <div class="border">
      <h2>Ben Stiller</h2>
      <div class="icons">
        <i class="fa fa-codepen" aria-hidden="true"></i>
        <i class="fa fa-instagram" aria-hidden="true"></i>
        <i class="fa fa-dribbble" aria-hidden="true"></i>
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-facebook" aria-hidden="true"></i>
      </div>
    </div>
  </div>
  <div class="card card2">
    <div class="border">
      <h2>Patrick Stewart</h2>
      <div class="icons">
        <i class="fa fa-codepen" aria-hidden="true"></i>
        <i class="fa fa-instagram" aria-hidden="true"></i>
        <i class="fa fa-dribbble" aria-hidden="true"></i>
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-facebook" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>

  </body>
</html>

<!DOCTYPE html>

<head>

<title>FantacyDesigns | Profile Card Hover </title>

</head>

<body>

<h2>Al Pacino</h2>

</div>

<h2>Ben Stiller</h2>

</div>

<h2>Patrick Stewart</h2>

</div>

</body>

</html>

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.

<a href="https://fantacydesigns.com/"><img src="https://fantacydesigns.com/wp-content/uploads/2021/08/Fantacy-2.png" alt="Fantacy logo"></a>
<h1 style="text-align:center;">Thank you for using our template!</h1>
<p style="text-align:center;">For more awesome templates please visit <strong><a href="https://fantacydesigns.com/blog">Fantacy Designs</a></strong>.</p>

<style>
img {
  margin: 0 auto;
  display: block;
  margin-top: 0%;
}
h1{
  margin-top:0px;
  font-family:arial;
}
p{
  font-family:arial;
  font-size:14px;
  text-decoration:none;
}
</style>

<h1 style="text-align:center;">Thank you for using our template!</h1>

<p style="text-align:center;">For more awesome templates please visit <strong><a href="https://fantacydesigns.com/blog">Fantacy Designs</a></strong>.</p>

<style>

img {

margin: 0 auto;

display: block;

margin-top: 0%;

}

h1{

margin-top:0px;

font-family:arial;

}

font-family:arial;

font-size:14px;

text-decoration:none;

}

</style>

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.

Task:

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