[CSS] 리스트에 마우스 올리면 사진 띄우기

요즘 벤치마킹을 하다보면 저렇게 마우스를 올리면 사진이 뜨는 ui를 많이 발견할 수 있다. 그래서 간단하게 만들어보았다.

 

HTML

  <div class="section">

    <ul>

      <li>

        1번 리스트

        <div class="img-box">

          <div class="img"></div>

        </div>

      </li>

      <li>

        2번 리스트

        <div class="img-box">

          <div class="img"></div>

        </div>

      </li>

      <li>

        3번 리스트

        <div class="img-box">

          <div class="img"></div>

        </div>

      </li>

    </ul>

  </div>

리스트는 ul li로 만들어주고 이미지를 띄울 공간을 미리 만들어주었다.

 

CSS

ul{

  padding: 40px;

}

li{

  padding: 80px 0;

  font-size: 40px;

  border-bottom: 4px solid #777;

  cursor: pointer;

  position: relative;

  transition: all 0.3s;

}

li:last-child{

  border-bottom: none;

}

.img-box{

  width: 300px;

  height: 300px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  overflow: hidden;

}

.img{

  width: 100%;

  height: 100%;

  background-color: black;

  transform: translateX(-100%);

  transition: all 0.3s;

}

li:hover{

  color : blue

}

li:hover .img{

  transform: translateX(0);

}

li에 position:relative을 해주고 img-box에 position: absolute를 해주어 그 리스트의 중간에 위치하게 설정해주고 overflow: hidden해주었다. 그리고 img-box안에 img는 transform을 이용해 img-box 옆 쪽으로 옮겨 안보이게 해주었다. 옆으로 옮겼을 때 안보이는 이유는 부모 요소에 overflow: hidden을 했기 때문에 요소의 크기 범위 바깥을 벗어나면 보이지 않는 것이다.

위와 같이 설정 후 li에 마우스를 올리면 (hover하면) transform의 값을 원위치로 돌아오게 설정했다.

 

꼭 옆에서 나오는 애니메이션 뿐 아니라 다양한 값들을 조정하면 많은 애니메이션을 만들 수 있을 것이다.