#images-box
  ul.images-box_list
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
View Compiled 
#images-box{
  margin-top: 100vh;
}
.images-box{
  &_list{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    list-style: none;
  }
  &_item{
    position: relative;
    img{
      width: 180px;
      height: 230px;
      object-fit: cover;
      transition: 1.5s ease all;
      opacity: 0;
      filter: blur(5px);
      transform: scale(1.02);
    }
    &.is-show{
      img{
        opacity: 1;
        filter: blur(0);
        transform: scale(1.0);
      }
    }
  }
}
View Compiled 

const targetEl = document.querySelectorAll(".images-box_item")

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-show')
    } else {
      entry.target.classList.remove('is-show')
    }
  })
}, {
  threshold: .5
})

targetEl.forEach(element => {
  observer.observe(element)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.