<div class="images-container">

  <div class="image-card">

    <img

      src="https://picsum.photos/id/84/1280/848"

      alt=""

    />

    <span class="filter-text"

      >filter: blur(5px);</span

    >

  </div>

​

  <div class="image-card">

    <img

      src="https://picsum.photos/id/103/1280/848"

      alt=""

    />

    <span class="filter-text"

      >filter: saturate(300%);</span

    >

  </div>

​

  <div class="image-card">

    <img

      src="https://picsum.photos/id/20/1280/848"

      alt=""

    />

    <span class="filter-text"

      >filter: grayscale(100%);</span

    >

  </div>

​

  <div class="image-card">

    <img

      src="https://picsum.photos/id/133/1280/848"

      alt=""

    />

    <span class="filter-text"

      >filter: contrast(200%);</span

    >

  </div>

​

  <div class="image-card">

    <img

      src="https://picsum.photos/id/146/1280/848"

      alt=""

    />

    <span class="filter-text"

      >filter: invert(95%);</span

    >

  </div>

​

  <div class="image-card">

    <img

      src="https://picsum.photos/id/152/1280/848"

      alt=""

    />

    <span class="filter-text"

      >filter: sepia(80%);</span

    >

  </div>

​

  <div class="image-card">

    <img

      src="https://picsum.photos/id/201/1280/848"

      alt=""

    />

    <span class="filter-text"

      >filter: brightness(150%);</span

    >

  </div>

​

  <div class="image-card">

    <img

      src="https://picsum.photos/id/219/1280/848"

      alt=""

    />

    <span class="filter-text"

      >filter: hue-rotate(200deg);</span

    >

  </div>

</div>

​

* {

  box-sizing: border-box;

}

​

body {

  margin: 0;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  padding: 100px;

}

​

.images-container {

  max-width: 500px;

  width: 100%;

  display: grid;

  justify-content: center;

  align-items: center;

  gap: 20px;

  width: 100%;

  grid-template-columns: repeat(2, 1fr);

}

​

.image-card {

  width: 300px;

  height: 250px;

  border-radius: 20px;

  overflow: hidden;

  position: relative;

}

.image-card .filter-text {

  position: absolute;

  bottom: 0;

  width: 100%;

  left: 0;

  background-color: white;

  font-family: Poppins;

  text-align: center;

  padding: 10px;

  color: peru;

  background-color: color-mix(in srgb, white, transparent 10%);

}

​

.image-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: filter 300ms;

}

​

.image-card:nth-child(1) img {

  filter: blur(5px);

}

​

.image-card:nth-child(2) img {

  filter: saturate(300%);

}

​

.image-card:nth-child(3) img {

  filter: grayscale(100%);

}

​

.image-card:nth-child(4) img {

  filter: contrast(200%);

}

​

.image-card:nth-child(5) img {

  filter: invert(95%);

}

​

.image-card:nth-child(6) img {

  filter: sepia(80%);

}

​

.image-card:nth-child(7) img {

  filter: brightness(150%);

}

​

.image-card:nth-child(8) img {

  filter: hue-rotate(200deg);

}

​

.image-card:hover img {

  filter: none;

}

​