hover시 간지나는 효과만들기!

[gyun님]

HTML+CSS활용하여 카드/갤러리에 hover시 간지나는 효과만들기!

<style>

/* 추가된 부분 */
#wrapper {
  width:500px;
  height:500px;
  background:#aed6e4;
}

/* 추가된 부분 */
#frame {
  width:400px;
  height:400px;
  background:#ffffff;
  box-shadow: 0 1px 10px rgba(0,0,0,0.5);
  position:relative;
  top:50px;
  left:50px;
}


</style>


<!-- 추가된 부분 -->
<div id="wrapper">
  <div id="frame">
    <div class="img-wrapper img1">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDtfNIkGooyqsBDlQ_W4bznuExkLsWUg0xwNJgmijy-2l7wn-T"/>
    </div>
      
    <div class="img-wrapper img2">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJSqmRDw0NslJoX2PGpU2MqCmcq1oxNaUSgqHWQzMo9xdffAxp"/>
    </div>
    
    <div class="img-wrapper img3">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRa9xmdTGxroxImnlyXBUcrFE-0BcjKofMscCK1Yu-NbahvMLqHLw"/>
    </div>
    
    <div class="img-wrapper img4">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTK-7Grq30fWlFQ_lVEmutDHaYboppq8zJo9zepB-EivlgUzuU-g"/>
    </div>
  </div>
</div>

html

[gyun님]

https://www.google.com/search?q=HTML%2BCSS%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC+%EC%B9%B4%EB%93%9C%2F%EA%B0%A4%EB%9F%AC%EB%A6%AC%EC%97%90+hover%EC%8B%9C+%EA%B0%84%EC%A7%80%EB%82%98%EB%8A%94+%ED%9A%A8%EA%B3%BC%EB%A7%8C%EB%93%A4%EA%B8%B0!&rlz=1C1NDCM_koKR825KR825&sourceid=chrome&ie=UTF-8

[gyun님]

동영상 https://www.google.com/search?q=HTML%2BCSS%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC+%EC%B9%B4%EB%93%9C/%EA%B0%A4%EB%9F%AC%EB%A6%AC%EC%97%90+hover%EC%8B%9C+%EA%B0%84%EC%A7%80%EB%82%98%EB%8A%94+%ED%9A%A8%EA%B3%BC%EB%A7%8C%EB%93%A4%EA%B8%B0!&sca_esv=592756846&rlz=1C1NDCM_koKR825KR825&tbm=vid&sxsrf=AM9HkKlQENZLNbpQiLd_qudVI5uTfvyl7w:1703145199749&source=lnms&sa=X&ved=2ahUKEwjjzoalhqCDAxXMhVYBHUXXDAIQ_AUoAnoECAEQBA&biw=1366&bih=641&dpr=1

[gyun님]

갤러리 https://www.google.com/search?q=HTML%2BCSS%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC+%EC%B9%B4%EB%93%9C/%EA%B0%A4%EB%9F%AC%EB%A6%AC%EC%97%90+hover%EC%8B%9C+%EA%B0%84%EC%A7%80%EB%82%98%EB%8A%94+%ED%9A%A8%EA%B3%BC%EB%A7%8C%EB%93%A4%EA%B8%B0!&sca_esv=592756846&rlz=1C1NDCM_koKR825KR825&tbm=isch&sxsrf=AM9HkKnExXu1fpHcsxzSg_LONoeIBDTLWg:1703145234443&source=lnms&sa=X&ved=2ahUKEwjiosy1hqCDAxWUp1YBHYI5DZcQ_AUoAXoECAEQAw&biw=1366&bih=641&dpr=1

[gyun님]

https://moonformeli.tistory.com/10

[gyun님]

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default