@property --blur-start {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 40%;
}

@property --blur-strength {
  syntax: "<length>";
  inherits: false;
  initial-value: 12px;
}

.prog-blur {
  height: 360px;
  width: 240px;

  position: relative;

  /*   clip the blurred element */
  overflow: clip;
}

.prog-blur::after {
  /*   position the after element right above the prog-blur element */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;

  margin: calc(var(--blur-strength) * -0.5);

  /*   create a gradient mask to achieve progressive effect */
  mask-image: linear-gradient(to top, black var(--blur-start), transparent);

  filter: blur(var(--blur-strength));
  scale: 1.15;
}

.prog-blur,
.prog-blur::after {
  border-radius: 20px;

  transition: all 300ms ease-in-out 100ms;
}

.prog-blur:hover::after {
  --blur-start: -100%;
}

.image-1,
.image-1::after {
  background: url(https://images.unsplash.com/photo-1744190070346-f0d4ab0d2b86?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDY4MTU5NDF8&ixlib=rb-4.1.0&q=85)
    no-repeat center center / cover;
}

.image-2,
.image-2::after {
  background: url(https://images.unsplash.com/photo-1740182855804-df51f010ff7f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDY4MTc1Nzh8&ixlib=rb-4.1.0&q=85)
    no-repeat center center / cover;
}

.image-3,
.image-3::after {
  background: url(https://images.unsplash.com/photo-1744125275850-822335d2f621?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDY4MTc1Nzh8&ixlib=rb-4.1.0&q=85)
    no-repeat center center / cover;
}

body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  height: 100dvh;
  width: 100dvw;
  margin: 0;
  background-color: #fce4ec;
}