사각 이미지 원형에 넣기, 이미지에 그림자 삽입, 배경에 패턴 넣기

 

---

border-radius: 00%;
box-shadow: x축 y축 그림자블러 색상투명도;

 

<!-- STORE -->
 <section class="find-store">

  <div class="inner">
    <img src="./images/find_store_texture1.png" alt="" class="texture1" />
    <img src="./images/find_store_texture2.png" alt="" class="texture2" />
    <img src="./images/find_store_picture1.jpg" alt="" class="picture picture1" />
    <img src="./images/find_store_picture2.jpg" alt="" class="picture picture2" />
    <div class="text-group">
      <img src="./images/find_store_text1.png" alt="" class="title">
      <img src="./images/find_store_text2.png" alt="" class="description">
      <div class="more">
        <a href="javascript:void(0)" class="btn">자세히 보기</a>
      </div>
    </div>

  </div>

 </section>

/* FIND STORE */
.find-store {
  background-image: url("../images/find_store_bg.jpg");
}

.find-store .inner {
  height: 400px;
}

.find-store .texture1 {
  position: absolute;
  top: 0;
  left: 400px;
}

.find-store .texture2 {
  position: absolute;
  bottom: 0;
  right: 0;
}

.find-store .picture {
  border-radius: 50%;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

.find-store .picture1 {
  position: absolute;
  top: -60px;
  left: 0;
}

.find-store .picture2 {
  position: absolute;
  top: 150px;
  left: 250px;
}

.find-store .text-group {
  position: absolute;
  top: 120px;
  left: 550px;
}

.find-store .text-group .title {
  margin-bottom: 20px;
}

.find-store .text-group .description {
  margin-bottom: 20px;
}