shifting elements with calc()

by jorgeluis

HTML

<div class="container1">

  <img src="http://placehold.it/300x180/222222/555555?text=thumb1" alt="" class="thumb1">

  <img src="http://placehold.it/300x180/554433/888888?text=thumb2" alt="" class="thumb2">

  <img src="http://placehold.it/300x180/112233/666666?text=thumb3" alt="" class="thumb3">

  <div class="cta">
    <h2>
      Headline
    </h2>
    <p>
      tagline, and more!
    </p>
  </div>
  
</div>

SCSS

body { margin: 0; padding: 0; }
.container1 {
  display: relative;
  width: 100%;
  text-align: center;
  background-color: black;
  color: white;
  
  img {
    display: inline-block;
    position: absolute;
    width: 300px;
    height: 180px;
    top: 0;
    transition: left 300ms ease-out, transform 1s ease-out;
  }

  .thumb1 {
    right: calc(50% + .1 * (100% - 300px));
  }
  .thumb2 {
    left: calc(50% + .1 * (100% - 300px));
  }
  .thumb3 {
    position: relative;
  }

  &:hover {
    .thumb1 {
      transform: translateX(-03%);
    }
    .thumb2 {
      transform: translateX(03%);
    }
  }

  .cta {
    position: absolute;
    top: 50px;
    width: 100%;
    text-align: center;
    line-height: 1.2;
  }
}