[image] CSS - Polaroid Images / Cards - (폴라로이드 이미지)

폴라로이드 이미지 효과

<style>

body {margin:25px;}

.box {

  width: 80%;

  background-color: white;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  margin: 0 auto 25px;

}

.box img {width:100%; max-width:100%;}

.box .subject {text-align: center; padding: 10px 20px;}

</style>

<div class="box">

  <img src="https://source.unsplash.com/random" alt="랜덤이미지1">

  <div class="subject">

  <p>랜덤이미지1</p>

  </div>

</div>

<div class="box">

  <img src="https://picsum.photos/200/300" alt="랜덤이미지2">

  <div class="subject">

  <p>랜덤이미지2</p>

  </div>

</div>

결과보기