<div class="item">
  <img class="img" alt="" src="https://images.pexels.com/photos/144474/pexels-photo-144474.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  <div class="hide"></div>
  <div class="icon">
    <img src="http://cdn.onlinewebfonts.com/svg/img_167183.png" alt="">
  </div>
</div>

.item {
  width: 350px;
  overflow: hidden;
  position: relative;
}

.img {
  display: block;
  width: 400px;
  transition: 0.34s linear;
  filter: grayscale(100%);
  transform: translateX(-30px);
}

.item:hover .img {
  transform: translateX(0px);
  filter: grayscale(0%);
}
.hide {
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.icon {
  width: 50px;
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
}

.icon img {
  display: block;
  width: 100%;
  opacity: 0;
  transition: 0.34s linear;
  transform-origin: 50% top;
  transition-delay: 0.2s;
}

.item:hover .icon img {
  opacity: 1;
  animation: swing 1s linear forwards;
}

@keyframes swing {
  0% {
    transform: rotate(-30deg);
  }
  30% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  70% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.item:hover .hide {
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  animation: hide 1s forwards;
  transition: 0.4s linear;
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}