<div class="single-item">
  <div class="left-set">
    <img src="http://images.nike.com/is/image/DotCom/PDP_HERO_S/NIKE-YA-LEBRON-MAX-AIR-BP-BA5124_660_A.jpg" alt="" />
    <img src="http://images.nike.com/is/image/DotCom/PDP_HERO_S/NIKE-YA-LEBRON-MAX-AIR-BP-BA5124_010_A.jpg" alt="" />
  </div>
  <div class="right-set">
    <div class="name">LEBRON MAX AIR</div>
    <div class="subname">KIDS' BACKPACK</div>
    <div class="price">$65</div>
    <div class="description">
    <p>
    The LeBron Max Air Kids' Backpack has cushioned, adjustable straps, a top-loading design and spacious main compartment for comfortable carrying and easy access to your gear.
    </p>
    </div>
    <div class="color">
      <ul>
        <li></li>
        <li></li>
      </ul>
    </div>
    <button>ADD TO CART</button>
  </div>
</div>

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.area(@width:1rem, @height:1rem) {
  width: @width;
  height: @height;
}

body {
  height: 100vh;
  background: #70e1f5;
  font-family: 'Roboto', sans-serif;
}

.single-item {
  .centered;
  .area(540px, 360px);
  border: solid 6px #fff;
  border-radius: 10px;
  background: #f5f5f5;
  box-shadow: 0 30px 20px -20px rgba(0,0,0,0.3);
  box-sizing: border-box;
}

.left-set, .right-set {
  position: relative;
  width: 50%;
  height: 100%;
}
.left-set {
  float: left;
  overflow: hidden;
  img {
    .centered;
    .area(300px, 300px);
  }
}
.right-set {
  float: right;
  padding: 2rem 1rem;
  box-sizing: border-box;
  .name, .subname {
    font-weight: bold;
  }
  .name {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  .subname {
    font-size: 0.8rem;
    line-height: 1rem;
  }
  .price {
    padding: 1rem 0;
    font-size: 2rem;
    font-weight: bold;
  }
  .description p{
    font-size: 0.9rem;
    text-align: justify;
    hyphens: auto;
  }
  .color {
    margin: 1rem 0;
    &:after {
      content: "";
      display: block;
      clear: left;
    }
    ul {
      li {
        .area(20px, 20px);
        border: solid 2px #aaa;
        border-radius: 4px;
        float: left;
        margin-right: 0.4rem;
        cursor: pointer;
        transition: all 0.4s ease;
        &:nth-child(1) {
          background: #222;
          &:hover {
            border-color: #222;
          }
        }
        &:nth-child(2) {
          background: crimson;
          &:hover {
            border-color: crimson;
          }
        }
      }
    }
  }
  button {
    width: 100%;
    height: 2rem;
    cursor: pointer;
    background: none;
    border: solid 2px #111;
    border-radius: 4px;
    font-weight: bold;
    letter-spacing: 0.2rem;
    transition: all 0.4s ease;
    &:hover {
      background: #70e1f5;
    }
  }
}

$("ul li:nth-child(1)").click(function(){
  $(".left-set img:nth-child(2)").animate({
    opacity: 1
  })
})

$("ul li:nth-child(2)").click(function(){
  $(".left-set img:nth-child(2)").animate({
    opacity: 0
  })
})