<div class="feed">
  <a class="like-btn">
    <div class="reaction-box">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
      <div class="reaction-icon wow">
        <label>Wow</label>
      </div>
      <div class="reaction-icon sad">
        <label>Sad</label>
      </div>
      <div class="reaction-icon angry">
        <label>Angry</label>
      </div>
    </div>
  </a>
</div>
$reaction-list: angry, flower, haha, like, love, sad, wow;
$reaction-size: 40;

html, body {
  padding: 20px;
  font-family: sans-serif;
}

.feed {
  width: 500px; height: 473px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAHZBAMAAACCytRRAAAAElBMVEXQ0NDf39/h4eHo6Ojt7e34+PjQ20C4AAAABnRSTlOZmZmZmZmTAzKZAAACY0lEQVR42u3dzQ2CMBgG4GIYQB3BCRyBQ8dmFnQDEgdQD3AE/IW08LyXHlpKnnxNaEoIRQxbzS6go6Ojo6Ojo6OjZ5iya+qhrkrV1131sdQvLo+qjo6Ojo6Ojo6Ojp7UHj6qOjo6Ojo6+mqe6/XPN4iqjo6Ojo6Ojo6Ojr7gHt7ZHDo6Onq2KXz7go6Ojo6Ojo6Ojp5VJr59+X7OStXR0dHR0dHR0dHR54pzeHR0dHR0dHR0dHR09NQzx9uX5BMteHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR09D+miCGEEA6bQrcWPDo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6+qpSdk2r6ujo6Ojo6Ojo6OhZ7eGbwc5T19yv78zUD35cRkcc9/nRmw/oE4NvZwseHR0dHR0dHR0dHR0dHR0dHR0dHR19W+n/06rq6Ojo6Ojo6Ojo6OjoyeYJhZoXiQEKSacAAAAASUVORK5CYII=);
  position: relative;
  
  .like-btn {
    width: 44px; height: 25px;
    background: #D0D0D0;
    position: absolute;
    bottom: 13px; left: 13px;
    cursor: pointer;
    
    &::before {
      content: "."; opacity: 0;
      display: block;
      width: 44px; height: 10px;
      position: absolute; 
      top: -10px; left: 0;
    }
    
    .reaction-box {
      position: absolute;
      width: 312px; height: 55px;
      background: #FFF;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      border-radius: 28px;
      left: -25px; bottom: 35px; 
      display: none;
      
      @for $i from 1 through length($reaction-list) {
        $reaction: nth($reaction-list, $i);
        .reaction-icon.#{$reaction} {
          animation: fadeInLoad-#{$reaction} 0.3s;
          -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
          background-position: 0px ($reaction-size * ($i - 1) * -1px);
        }
      }
      
      .reaction-icon {
        display: inline-block;
        width: $reaction-size * 1px; height: $reaction-size * 1px;
        background: url(data:image/png;base64,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);
        background-size: cover;
        border-radius: 20px;
        margin: 8px -1px 0 8px;
        text-align: center;
        // Animation
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        opacity: 0;
        transform: translate(0, 100px) scale(0);
        
        label {
          padding: 3px 5px 3px 5px;
          position: relative;
          top: -24px;
          border-radius: 10px;
          font-size: 11px;
          color: #FFF;
          background: #333;
          visibility: hidden;
        }
      }
    }

    &:hover {
      background: #718C00;
      
      .reaction-box {
        display: block;  
                
        .reaction-icon {
          
          &.show {
            opacity: 1;
            transform: translate(0, 0) scale(1);
          }
          
          &:hover {
            transform: scale(1.4);
            transform-origin: bottom;

            label {
              visibility: visible;
            }
          }
        }
      }
    }
  }
}
View Compiled
$(function(){
  $(".like-btn").hover(function() {
    $(".reaction-icon").each(function(i, e) {
      setTimeout(function(){
        $(e).addClass("show");
      }, i * 100);
    });
  }, function() {
    $(".reaction-icon").removeClass("show")
  });
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js