[아임웹 코드] Hover 시 반응하는 이미지 갤러리

시연 동영상 보기

<div class="articlegallery">

<article class="gallery">

  <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/d434d3b0d2c20.jpg" alt="img1" />

  <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/ffe192a609e79.jpg" alt="img2" />

  <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/9c79654091a9e.jpg" alt="img3" />

  <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/218d230c55197.jpg" alt="img4" />

  <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/48240e799fbe5.jpg" alt="img5" />

  <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/aac7159d4e9a3.jpg" alt="img6" />

  <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/249d1fd29de75.jpg" alt="img7" />

  <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/8f8b0262756d1.jpg" alt="img8" />

</article>

</div>

<style>

  .articlegallery {

  margin: 0;

  min-height: 100vh;

  display: grid;

  place-items: center;

}

.gallery {

  --size: 100px;

  display: grid;

  grid-template-columns: repeat(6, var(--size));

  grid-auto-rows: var(--size);

  margin-bottom: var(--size);

  place-items: start center;

  gap: 5px;

  &:has(:hover) img:not(:hover),

  &:has(:focus) img:not(:focus){

    filter: brightness(0.5) contrast(0.5);

  }

  & img {

    object-fit: cover;

    width: calc(var(--size) * 2);

    height: calc(var(--size) * 2);

    clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z");

    transition: clip-path 0.25s, filter 0.75s;

    grid-column: auto / span 2;

    border-radius: 5px;

    &:nth-child(5n - 1) { 

      grid-column: 2 / span 2 

    }

    &:hover,

    &:focus {

      clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z");

      z-index: 1;

      transition: clip-path 0.25s, filter 0.25s;

    }

    &:focus {

      outline: 1px dashed black;

      outline-offset: -5px;

    }

  }

}

</style>