<div class="container">
  <div class="col-xs-12 col-sm-6 item">
    <img src="https://cdn.rawgit.com/eevu/codepen-assets/master/placeholder1.svg" class="img" />
    <div class="share-links">
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-facebook"></i></a>
      <a href="#"><i class="fa fa-instagram"></i></a>
      <a href="#"><i class="fa fa-tumblr"></i></a>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 item">
    <img src="https://cdn.rawgit.com/eevu/codepen-assets/master/placeholder2.svg" class="img" />
    <div class="share-links">
      <a href="#"><i class="fa fa-share-alt"></i></a>
      <a href="#"><i class="fa fa-floppy-o"></i></a>
      <a href="#"><i class="fa fa-commenting-o"></i></a>
      <a href="#"><i class="fa fa-heart-o"></i></a>
    </div>
  </div>
</div>

<footer class="text-center">
  <p>Inspired by <a href="https://tympanus.net/Development/HoverEffectIdeas/index2.html" target="_blank">Codrops</a></p>
</footer>

/** Resets **/

body {
  font-size: 16px;
}

a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
}

footer {
  clear: both;
  font-size: 14px;
  padding: 2em;
}


/** Layout **/

.item {
  position: relative;
  padding: 0;
  border: 10px solid #fff;
  background-color: #f2f2df;
}

.img {
  width: 100%;
  height: auto; /* Using a square img in this case  */
}

.item:hover > .img {
  transform: scale(0);
}


/** Hover Effect **/


/* Links Container */

.share-links {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(145, 138, 111, .3);
  color: #fff;
  font-size: 1.1em;
}


/* Share Buttons */

.share-links > a {
  display: inline-block;
}


/* Icons */

.share-links > a > i {
  position: relative;
  padding: 8px 10px;
}

.share-links > a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1em;
  height: 0px;
  margin: auto;
  background-color: #fff;
}


/* Icons - initial positions */

.share-links > a:first-child {
  transform: translateX(-40px) translateY(-80px);
}

.share-links > a:last-child {
  transform: translateX(40px) translateY(-80px);
}

.share-links > a:nth-child(2) {
  transform: translateX(-80px) translateY(80px);
}

.share-links > a:nth-child(3) {
  transform: translateX(80px) translateY(80px);
}


/* Diamond Shape */

.share-links::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%; /* Warning: percantages only work well with a square img */
  margin: auto;
  border: 2px solid #fff;
  transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(.4);
}


/* Animations */

.img,
.share-links,
.share-links > a,
.share-links::before {
  transition: all 300ms ease-out;
}

.share-links > a > i,
.share-links > a::after {
  transition: all 200ms ease-out;
}

.item:hover > .share-links {
  visibility: visible;
  opacity: 1;
}

.item:hover > .share-links > a:nth-child(n) {
  transform: translateX(0px) translateY(0px);
}

.item:hover > .share-links::before {
  transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1);
}

.share-links > a:hover::after {
  height: 18px;
}

.share-links > a:hover > i {
  transform: translateY(-15px);
}