DEV Community

Cover image for 🎨 How to create Twitter Profile Hover Card using HTML and CSS
Max Programming
Max Programming

Posted on • Updated on • Originally published at blog.usmans.me

🎨 How to create Twitter Profile Hover Card using HTML and CSS

Welcome back developers! 👋

In this post, we'll see how you can recreate the hover card by Twitter using HTML and CSS, so let's get started.

This hover card will appear when you hover over any profile. But in our case, we will just make the over card.

I also have a video on YouTube on this which you might want to check out too.

This is how it will look like in the end.

image.png

🧱 HTML

The HTML is very self explanatory and very easy. We create wrappers around and then we create three <div> tags which will contain the content.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Twitter Hovercard</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="profile">
          <div class="main-profile"></div>
          <div class="user-bio"></div>
          <div class="user-follows"></div>
        </div>
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

1. main-profile div

The main-profile div will basically contain the Profile Picture, Name, Handle and the Follow button. Which will be in the first row. We will then use flexbox to style it.

<div class="main-profile">
  <div class="user-info">
    <img src="./profile.jpg" alt="Profile Pic" />
    <h3>Max Programming</h3>
    <p>@MaxProgramming1</p>
  </div>
  <div class="follow-btn">
    <button>Follow</button>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

2. user-bio div

This div will contain the bio of the user, in this case my bio. You can separate it into different lines using the <br /> tag.

<div class="user-bio">
  <p>
    👨‍💻 Programmer, Learner, YTuber, Blogger, and Cricket lover!
    <br />
    😊 15 years old
    <br />
    My name is Usman
    <br />
    ☪ Muslim
    <br />
    Blog: <a href="http://blog.usman-s.me">blog.usman-s.me</a>
    <br />
    YT:
    <a href="http://youtube.com/MaxProgramming">youtube.com/MaxProgramming</a>
  </p>
</div>
Enter fullscreen mode Exit fullscreen mode

3. user-follows div

This is the simplest one of all. You just create two <div> tags inside it with Following and Followers and their numbers.

We use the <b> tags to bolden out the numbers.

<div class="user-follows">
  <div><b>613</b> Following</div>
  <div><b>471</b> Followers</div>
</div>
Enter fullscreen mode Exit fullscreen mode

This is what we get after this table is done. Let's now style it out with the magic of CSS.

image.png

🎨 CSS

1. Resets

At the start, we set the margin and padding to 0, and set the box-sizing to border-box.
And then we set the font for every element to be sans-serif according to the system.

We style the container to center everything on the page

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

image.png


2. The Card

Now to style the card div, we and add shadow, border radius and padding to it.

.card {
  box-shadow: 1px 1px 10px 1px #a1a1a1;
  border-radius: 10px;
  padding: 20px;
}
Enter fullscreen mode Exit fullscreen mode

image.png


3. Main Profile

Now as the main-profile contains the main details, we'll position it better using Flexbox.

.main-profile {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
Enter fullscreen mode Exit fullscreen mode

And then we will add some stylings to make the profile picture smaller, increase the size for the name, and change the color of the handle.

.user-info img {
  width: 100px;
  border-radius: 50%;
}

.user-info h3 {
  font-size: 1.3rem;
}

.user-info p {
  color: #5b7083;
}
Enter fullscreen mode Exit fullscreen mode

This is the progress so far

image.png

Let's style the Follow button now.

Here, we set the border and the text to the twitter blue color, the background is set to the same color but transparent. We make the text bold, and add a hover effect with a transition.

.follow-btn button {
  font-size: 1.5rem;
  border: 3px solid #1da1f2;
  border-radius: 25px;
  background-color: rgba(29, 161, 242, 0);
  padding: 8px 20px;
  margin: 5px;
  font-weight: bold;
  color: #1da1f2;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease-in-out;
}

.follow-btn button:hover {
  background-color: rgba(29, 161, 242, 0.2);
}
Enter fullscreen mode Exit fullscreen mode

Now we got the perfect button with the hover effect as well. Which change the background color's opacity.

image.png


4. User bio

The bio is fairly easy. We just change the color of the text, add some margin and change the color of the <a> tags like the styles of Twitter.

.user-bio {
  color: #0f1419;
  margin-bottom: 10px;
}

.user-bio a {
  color: #1da1f2;
  text-decoration: none;
}

.user-bio a:hover {
  text-decoration: underline;
}
Enter fullscreen mode Exit fullscreen mode

image.png


5. User Follows

This is the easiest part. We use flexbox, we add some margins to the <div>. And we change the color of the text.

.user-follows {
  display: flex;
  color: #5b7083;
}

.user-follows div {
  margin-right: 10px;
}

.user-follows b {
  color: black;
} 
Enter fullscreen mode Exit fullscreen mode

And that is how you recreate Twitter's hover card using HTML and CSS. I hope you like this blog post. If you do, please leave a like comment down below about your experience.

Here's the source code.

Twitter Hovercard using HTML and CSS

Code for the YouTube video

screenshot






Thanks for reading!

Top comments (1)

Collapse
 
fisayomi profile image
Oluwafisayomi Agboola

Nice