JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="show">
    <div class="readLater mouseover"><i class="fa fa-bookmark-o"></i></div>
    <div class="share mouseover"><i class="fa fa-facebook-square"></i> </div>
</div>

CSS

.mouseover {
    height: 25px;
    width: 25px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    color: white;
    background-color: green;
    text-align: center;
    font-size: large;
}

.show{
    display: block;
    position: absolute;
    height: 35px;
    width: 60px;
}

.readLater {
    position: absolute;
    top: 5px;
    left: 5px;
}
.share {
    position: absolute;
    top: 5px;
    left: 35px;
}

JavaScript

$(function(){
    $('.show').hover(
    function () {
        $(this).find('.mouseover').fadeIn();
    },

    function () {
        $(this).find('.mouseover').fadeOut();
    });
});