object-fit

HTML

<img src="http://i.imgur.com/vz3lU5k.png" class="book" alt="">
    <div class="icons">
        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" class="world"  alt="">
        <img src="http://i.imgur.com/vz3lU5k.png" alt="" class="info">
        <img src="http://i.imgur.com/vz3lU5k.png" alt="" class="mail">
    </div>
    <div class="svg left">
      <img class="svg__image" height="1000px" width="1000px" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/box.svg" alt="squares"/>
  </div>

CSS

img {
            object-fit: none;
            object-position: 0 0;
            width: 80px;
            height: 80px;
        }
        .book {
            object-position: 0 -234px;
        }
        .icons {
            display: inline-block;
            text-align: center;
            margin: 0 auto;
            margin-top: 30vh;
            margin-bottom: 30px;
            width: 100%;
        }
        .icons img {
            height: 74px;
            width: 90px;
            object-fit: none;
            object-position: 0 0;
            transition: all .2s ease
        }
        .icons img:hover {
            object-position: 0 -234px;
            cursor: pointer;
        }
        .world {
            object-position: 0 0;
        }
        .mail {
            object-position: 0 -75px;
        }
        .info {
            object-position: 0 -154px;
        }

        .svg {
          margin: 0 auto;
          height: 400px;
          width: 400px;
      }

      .svg__image {
          display: inline-block;
          transition: all .3s ease;
          width: 400px;
          height: 400px;
          object-fit: none;
          cursor: pointer;
      }
      .left .svg__image {
          object-position: 0 0;
      }
      .middle .svg__image {
          object-position: 50% 50%;
      }
      .right .svg__image {
          object-position: 100% 100%;
      }

      * {
          box-sizing: border-box;
      }

      body {
          padding: 30px;
          font-family: 'Source Code Pro', Monaco;
      }

      h1 {
          border-bottom: 4px solid #ddd;
          padding-bottom: 5px;
          margin-bottom: 30px;
          font-size: 18px;
      }

      a {
          color: #E06363;
      }

      p {
          text-align: center;
          margin-top: 40px;
      }

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    var svg = document.querySelector('.svg'),
        pos = "left";

      svg.addEventListener('click', function(){
        switch(pos) {
          case "left":
            svg.classList.remove('left');
            svg.classList.add('middle');
            pos = "middle";
            break;
          case "middle":
            svg.classList.remove('middle');
            svg.classList.add('right');
            pos = "right";
            break;
          case "right":
            svg.classList.remove('right');
            svg.classList.add('left');
            pos = "left";
        }
      }, false);
    });