마우스 오버 시 이미지 팝업

최근에 호버에 이미지 팝업을 만드는 작업이 있었습니다. 위의 이 gif는 내가 의미하는 바를 설명합니다. 나는 그것을하는 방법을 몰랐지만 몇 분 동안 인터넷 검색을 한 후 구현하기 쉽고 JavaScript를 사용하지 않는 기술을 찾았습니다. 이 기술은 썸네일 이미지(작은 이미지)와 썸네일 이미지 위로 마우스를 가져가면 나타나는 큰 이미지의 두 이미지를 나란히 배치하는 것입니다. 해보자

첫 번째 단계:

아래 코드 블록에서 볼 수 있듯이 썸네일 이미지와 더 큰 이미지의 두 이미지를 나란히 배치합니다. 따라서 HTML 파일에 다음 코드를 추가하고 이미지 파일을 올바르게 연결해야 합니다.

<main>
  <ul>
    <li>
      <img src="img/thumbnail1.jpg" alt="adventure" >
      <span class="large">
          <img src="img/large1.jpg" class="large-image" alt="adventure" >
      </span>
    </li>
    <li>
      <img src="img/thumbnail2.jpg"" alt="cat" >
      <span class="large">
         <img src="img/large2.jpg" class="large-image" alt="cat" >
      </span>
    </li>
    <li>
        <img src="img/large3.jpg" alt="adventure" >
        <span class="large">
          <img src="img/large3.jpg" class="large-image" alt="adventure" >
        </span>
    </li>
  </ul>
</main>

정렬되지 않은 목록을 사용하고 있으므로 CSS에서 ul 및 li 스타일을 지정하여 목록 스타일을 제거합니다. 또한 모든 목록 항목을 인라인으로 표시하고 이미지를 스타일로 표시합니다. HTML 코드에 연결된 CSS 파일에 다음을 추가합니다.

    ul {
      display: flex;
    }

    li {
      list-style-type: none;
      padding: 10px;
      position: relative;
    }

이제 이것이 우리 페이지의 모습입니다.

두번째 단계

다음으로 절대 위치 지정을 사용하여 더 큰 이미지를 시각적으로 숨깁니다. 더 큰 이미지가 배치된 span에 추가한 클래스를 사용합니다.

.large {
  position: absolute;
  left: -9999px;
}

이제 작은 이미지만 남게 됩니다.


작은 이미지 위로 마우스를 가져갈 때 큰 이미지가 팝업되도록 몇 가지 스타일을 추가해 보겠습니다.

li:hover .large {
  left: 20px;
  top: -150px;
}

그게 전부입니다. 작은 이미지 위로 마우스를 가져가면 큰 이미지가 나타납니다.

이미지에 상자 그림자를 추가하고 각 이미지 아래에 텍스트를 추가하여 더 많은 작업을 수행할 수 있습니다. 그림자를 추가하고 큰 이미지에 테두리 반경을 주기로 결정했습니다.

.large-image {
  border-radius: 4px;
   box-shadow: 1px 1px 3px 3px rgba(127, 127, 127, 0.15);;
}

그래서 우리는 끝났습니다. 비슷한 일을 한 적이 있습니까? 넌 어떻게 그걸 했니? 알고 싶습니다.