Profile Card with Hover Effect using HTML & CSS



Hello developers, today in this blog, you'll learn to create a Profile Card with Hover Effect using HTML & CSS.

A profile card contains the person’s details like photo, name, contact icons, designation and their rating to the destination, and some other information about the person. A profile card is used as an identity of a specific person. By placing the profile card on the web page, the user can contact the person easily. A Profile Card with Hover Effect is that when you hover over the profile card it will show you the profile of the person.

In this blog(Profile Card with Hover Effect), there is a card at the center of the webpage, which contains the profile icon of the person, name, and designation. When you hover over the card, the profile icon of the person will be viewed with their name and destination. There is also a view more button, to view more details of the person. The Hover Effect has been used by CSS property.

The source code of the Profile Card with Hover Effect is given below, if you want the source code of this program, you can copy it. You can use this Profile Card with Hover Effect on your project.

Profile Card with Hover Effect [Source Code]

To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Profile Card with Hover Effect || Learningrobo</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="card transition"> <h2 class="transition">Jessy<br><small>Web Developer</small></h2> <div class="cta-container transition"><a href="#" class="cta">View more...</a></div> <div class="card_circle transition"></div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page responsive and attractive, create a CSS file with the name style.css, and remember that you have to make a file with a .css extension.


@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic);

html,
body {
  background-color: #eee;
}

.transition {
  transition: .3s cubic-bezier(.3, 0, 0, 1.3)
}

.card {
  background-color: #fff;
  height: 400px;
  width: 300px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.card:hover {
  box-shadow: 0px 30px 30px rgba(0,0,0,0.2);
  height: 430px;
  width: 330px;
}

.card_circle {
  height: 400px;
  width: 450px;
  background: url(https://cdn.pixabay.com/photo/2016/11/14/17/39/person-1824144__340.png) no-repeat;
  background-size: cover;
  position: absolute;
  border-radius: 50%;
  margin-left: -75px;
  margin-top: -270px;
}

.card:hover .card_circle {
  border-radius: 0;
  margin-top: -110px;
}

h2 {
  text-align: center;
  margin-top: 190px;
  position: absolute;
  z-index: 9999;
  font-size: 26px;
  color: #1261a0;
  width: 100%;
  font-family: 'Noto Sans', serif;
}

h2 small {
  font-weight: normal;
  font-size: 65%;
  color: rgba(0,0,0,0.5);
}

.card:hover h2 {
  margin-top: 140px;
  color: #000;
}

.card:hover h2 small {
  color: #000;
}

.cta-container {
  text-align: center;
  margin-top: 290px;
  position: absolute;
  z-index: 9999;
  width: 100%;
  font-family: 'Noto Sans', serif;
}

.cta {
  color: #fff;
  border: 2px solid #1261a0;
  background-color: #1261a0;
  padding: 10px 25px;
  border-radius: 50px;
  font-size: 17px;
  text-decoration: none;
  font-weight: bold;
}

.card:hover .cta-container {
  margin-top: 320px;
}
.credit{
  text-align: center;
  color: #000;
  margin: 10px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
  text-decoration: none;
  color:#000;
  font-weight: bold;
}
We hope you will like this Profile Card with Hover Effect using HTML & CSS.

Thank you for reading our blog. If you face any problem creating this Profile Card with Hover Effect using HTML & CSS, then contact us or comment to us. We'll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome