<!-- 1.hover-moving-box는 가장 바깥의 파란색 배경 상자입니다. -->
<div class="hover-moving-box">
  <!--  2. box는 캐릭터 이미지를 담고 있는 상자입니다.  -->
  <div class="box">
    <!--  3. 이미지를 불러옵니다.   -->
    <img src="http://report.stibee.com/images/report2016/main-email@2x.png" width="164">
  </div>
</div>

/* 1.hover-moving-box는 가장 바깥의 파란색 배경 상자입니다. */
.hover-moving-box {
  width:100%;
  height:200px;
  position:relative;
  background: #4c6ef5;
}

/* 2. box는 캐릭터 이미지를 담고 있는 상자입니다. */
/* 3. 이 상자에는 transition이라는 속성이 설정되어 있습니다. */
.hover-moving-box .box {
  width: 100px;
  height: 100px;
  color:#fff;
  text-align:center;
  position: absolute;
  top:20px;
  left:2%;
  transition: all 3s ease;
}

/* 4.:hover, 즉 마우스오버를 하면 80%만큼 이동을 합니다. */
.hover-moving-box:hover .box {
  left:80%;
}