How make thumbnail like this in css?

1

How make thumbnail like this in css using three images.

image

Any help would be appreciated.

2

Well you could get started with border-radius and an image.

3

Many ways to accomplish that - here’s one:

Using div + background instead of img to be able to use background-size: cover in css. Helps in case the image aspect ratios are not known or fixed.

<div class="triple-avatar">
  
    <div style="background-image: url( the 1st url here )"></div>
    <div style="background-image: url( the 2nd url here )"></div>
    <div style="background-image: url( the 3rd url here)"></div>
  
</div>

And (using SCSS)

$avatar-width: 200px;

.triple-avatar{
  position: relative;
  width: $avatar-width;
  height: $avatar-width;
  overflow: hidden;
  border-radius: 50%;

  div{
    position: absolute;
    background-size: cover;
    left: $avatar-width / 2;
    width: $avatar-width / 2;
    height: $avatar-width / 2;
     &:first-of-type{
       height: $avatar-width;
       left: 0px;
    }
    &:last-of-type{
      top: $avatar-width / 2;
    }
  }
}

The Codepen can be found here:

If you need plain CSS, just switch to View Compiled at CSS.

1 Like
4

I like that, very smart!

5

thanks @mikkokam. Works like a charm.