Layering Profile Images Over One Another

If you need to show a list of users, members, or anything similar, you may want to display profile images over one another to both conserve space and create a feeling grouping amongst those users.

by Solodev CMS

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="col-sm-9 col-xl-10 order-2 order-sm-1">
  <div id="grid_groups_wrapper" class="">
    <table id="grid_groups" class="table table-hover w-100" role="grid">
      <thead>
        <tr role="row">
          <th class="user_group_image_id grid-icon sorting_asc" rowspan="1" colspan="1" style="width: 25px;"></th>
          <th class="name sorting" tabindex="0" aria-controls="grid_groups" rowspan="1" colspan="1" style="width: 100px;">
            Group Name
          </th>
          <th class="members" rowspan="1" colspan="1" aria-label="Members" style="width: 445px;">
            Members
          </th>
        </tr>
      </thead>
      <tbody>
        <tr role="row group" class="odd">
          <td class="grid-icon">
            <div class="default-avatar rounded-circle d-flex align-items-center justify-content-center mx-auto text-uppercase">A</div>
          </td>
          <td class="group-class">Administrators</td>
          <td><a class="route d-flex">
              <div title="Baby Yoda" class="rounded-circle default-avatar member-overlap-item" style="background: url(/images/baby-yoda.jpg) 0 0 no-repeat; background-size: cover;">
              </div>
              <div title="R2D2" class="rounded-circle default-avatar member-overlap-item" style="background: url(/images/r2d2.jpg) 0 0 no-repeat; background-size: cover;">
              </div>
              <div title="Jabba the Hut" class="rounded-circle default-avatar member-overlap-item" style="background: url(/images/jabba-the-hut.png) 0 0 no-repeat; background-size: cover;">
              </div>
              <div title="Chewbacca" class="rounded-circle default-avatar member-overlap-item" style="background: url(/images/chewy.png) 0 0 no-repeat; background-size: cover;">
              </div>
              <div title="C-3PO" class="rounded-circle default-avatar member-overlap-item" style="background:...

CSS

.default-avatar {
  background-color: #47d501;
  font-weight: 500;
  color: #fff;
  font-size: 1rem;
}

.default-avatar,
.member-overlap-item {
  height: 40px;
  width: 40px;
}

.table td,
.table th {
  padding: 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid #dee2e6;
}

.member-overlap-item {
  margin-right: -10px;
  border: 2px solid #fff;
}

.group {
  min-height: 40px;
  height: 66px;
  line-height: 66px;
}

.grid-icon {
  vertical-align: middle;
  line-height: 1;
}

.group-class {
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
}