<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div> 

.card {
  width:600px;
  height:600px;
  margin:50px;
  border-radius:50px;
  max-width:90%;
  max-height:90%;
  position:relative;
  box-shadow:0px 0px 10px fade(#fff,80%);
  //backgrounds defined below
  background-size:cover !important;  
  &::after {
    width:100%;
    height:100%;
    border-radius:50px;
    position:absolute;
    top:0;left:0;
    z-index:-1;
    content:'';
    background:inherit;
    filter:blur(20px);
    transform:scale(1.05);
    opacity:0.8;
    transition:500ms all ease-in-out 0ms;
  }
  &:hover::after {
    transform:scale(0.8);
    opacity:0;
  }
}
 
.card:nth-of-type(1) {
  background:url('https://assets.codepen.io/48941/photo-1627208550904-7abe585132d4.avif')
}
.card:nth-of-type(2) {
  background: url('https://assets.codepen.io/48941/photo-1560015534-cee980ba7e13.avif');
}
.card:nth-of-type(3) {
  background:url('https://assets.codepen.io/48941/photo-1641135821230-04f53e366336.avif')
}
.card:nth-of-type(4) {
  background:url('https://assets.codepen.io/48941/photo-1647099450706-bddaf1219994.avif')
}






body {
  background:#fff;
  color:white;
  font-family:system-ui, sans-serif;
  height:98.65vh;
  display:flex;
  align-items:center;
  justify-content:space-around;
  flex-wrap:wrap
}

// card 1: Zoltan Tasi: https://unsplash.com/photos/uVdakmLWWpI

// card 2: Faith: https://unsplash.com/photos/kgqu_qs3B78

// card 3: Grace Nandy: https://unsplash.com/photos/wC8Dj0EEXFc

// card 4: Wolfgang Hasselmann: https://unsplash.com/photos/4WdDBcNbpMQ