Back

Mastering Hoverable Avatar Grids with Dynamic Overlays

An in-depth tutorial for crafting a responsive avatar grid with interactive hover effects for modern web applications.

HTML

To begin creating our hoverable avatar grid, we structure our HTML with a container for the grid and individual items for each avatar. Each avatar item consists of an image and an overlay div that will display information on hover.

      <div class="avatar-grid">
        <div class="avatar-item">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar 1" class="avatar-image">
          <div class="overlay">
            <div class="overlay-text">John Doe</div>
          </div>
        </div>
        <div class="avatar-item">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar 2" class="avatar-image">
          <div class="overlay">
            <div class="overlay-text">Jane Smith</div>
          </div>
        </div>
        <div class="avatar-item">
          <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar 3" class="avatar-image">
          <div class="overlay">
            <div class="overlay-text">Mike Johnson</div>
          </div>
        </div>
      </div>

CSS

Moving on to the CSS, our goal is to create an engaging hover effect by using transitions and overlays. Firstly, we use Flexbox to make sure the avatars are neatly spaced within the grid.

        .avatar-grid {
          display: flex;
          justify-content: space-around;
          margin: 20px;
        }

Next, for each avatar item, we define a relative position and ensure the image fits into a circle with CSS border-radius properties.

        .avatar-item {
          position: relative;
          width: 150px;
          height: 150px;
          overflow: hidden;
          border-radius: 50%;
          transition: transform 0.5s;
        }

When hovering over an item, we scale it to create a subtle zoom-in effect.

        .avatar-item:hover {
          transform: scale(1.1);
        }

For the avatar image, we ensure it fills the entire container, maintaining the circular crop.

        .avatar-image {
          width: 100%;
          height: auto;
          border-radius: 50%;
        }

The overlay is initially transparent, positioned over the avatar. On hover, it changes to semi-opaque for a dynamic effect, revealing the name text centered within it.

        .overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.6);
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          opacity: 0;
          transition: opacity 0.5s;
        }

        .avatar-item:hover .overlay {
          opacity: 1;
        }

        .overlay-text {
          font-size: 18px;
          text-align: center;
        }

By following these steps, you can create a polished hoverable avatar grid that enhances the visual appeal of any web application. Leveraging CSS for interactivity means our component remains lightweight and efficient.

Whole code

<div class="avatar-grid">
  <div class="avatar-item">
    <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar 1" class="avatar-image">
    <div class="overlay">
      <div class="overlay-text">John Doe</div>
    </div>
  </div>
  <div class="avatar-item">
    <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar 2" class="avatar-image">
    <div class="overlay">
      <div class="overlay-text">Jane Smith</div>
    </div>
  </div>
  <div class="avatar-item">
    <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar 3" class="avatar-image">
    <div class="overlay">
      <div class="overlay-text">Mike Johnson</div>
    </div>
  </div>
</div>

<style>
.avatar-grid {
  display: flex;
  justify-content: space-around;
  margin: 20px;
}
.avatar-item {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 50%;
  transition: transform 0.5s;
}
.avatar-item:hover {
  transform: scale(1.1);
}
.avatar-image {
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s;
}
.avatar-item:hover .overlay {
  opacity: 1;
}
.overlay-text {
  font-size: 18px;
  text-align: center;
}
</style>

Thank you for reading this article.

Mastering Hoverable Avatar Grids with Dynamic Overlays

HTML

CSS

Whole code

Comments

More avatars

Similar

See also