hover

<div id="container">

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatem quidem quisquam ullam necessitatibus non ad numquam cumque vero distinctio rerum quos beatae minus accusantium odio! Molestiae beatae obcaecati velit.</div>

  <div>Cupiditate sed veniam! Obcaecati ea quisquam harum iste eum fuga dolorem illo eius neque facilis adipisci labore iusto reprehenderit! Odio animi fuga dolores est commodi facilis impedit distinctio qui totam!</div>

  <div>Architecto quae quasi aliquam magnam molestias est aspernatur culpa eius sunt dolor. Perferendis tempore ullam ipsam alias quo ad dolore deserunt in laborum laudantium hic incidunt placeat cupiditate. Aperiam corporis.</div>

  <div>Accusantium soluta quidem illo laboriosam ipsum perspiciatis perferendis molestias odit consequatur voluptatibus ea ratione facere reprehenderit necessitatibus rerum asperiores voluptatem maxime adipisci! Cupiditate repudiandae beatae ab perspiciatis nulla repellendus unde.</div>

  <div>Aut ex ea officia neque debitis ipsum omnis voluptatem illo cumque mollitia quam ipsa eos ipsam molestiae nam accusamus odio tempore nemo distinctio reprehenderit accusantium repellendus sapiente eligendi! Nihil dignissimos!</div>

<div id="aap"></div>

<div id="aaphover"></div>

</div>

#container {

  border: 1px solid black;

  margin: 25px auto;

  padding: 20px;

  width: 400px;

  background-image: linear-gradient(left, #f00, rgba(255,255,0,0.4));

  background-position: 0 0;

  background-size: 100% 100%;

  background-repeat: no-repeat;

}

#aap {

  width: 100px;

  height: 100px;

  position: absolute;

  top: 50px;

  right: 100px;

  background-color: #00f;

  z-index: -1;

  transition: transform 1s;

}

#aaphover {

  width: 100px;

  height: 100px;

  position: absolute;

  top: 50px;

  right: 100px;

  background-color: rgba(255, 0, 0, 0.2);

  z-index: 2;

}

#aap:hover {

  background-color: red;

  transform: translate(100px, 0);

}

window.onload = init;

function init() {

  var aapHover = document.getElementById('aaphover');

  aaphover.onmouseover = moveAap;

  aaphover.onmouseout = moveAapBack;

}

function moveAap(e) {

  var aap = document.getElementById('aap');

  aap.style.webkitTransform="translate(100px, 0)";

}

function moveAapBack(e) {

  var aap = document.getElementById('aap');

  aap.style.webkitTransform="translate(0, 0)";

}