<div class="feed">
<a class="like-btn">
<div class="reaction-box">
<div class="reaction-icon">
<label>Like</label>
</div>
<div class="reaction-icon">
<label>Love</label>
</div>
<div class="reaction-icon">
<label>Haha</label>
</div>
<div class="reaction-icon">
<label>Wow</label>
</div>
<div class="reaction-icon">
<label>Sad</label>
</div>
<div class="reaction-icon">
<label>Angry</label>
</div>
</div>
</a>
</div>
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: #F0C674;
border-radius: 28px;
left: -25px; bottom: 35px;
display: none;
.reaction-icon {
width: 40px; height: 40px;
display: inline-block;
background: #8959A8;
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
This Pen doesn't use any external CSS resources.