<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="chart__wrap"> <div> 11111111111 </div> <div class="chart-toolbar_layer"> <div class="chart-toolbar btn-group-vertical" role="group" aria-label="Vertical button group"> <button type="button" class="btn btn-outline-secondary"><span class="glyphicon glyphicon-star"></span></button> <button type="button" class="btn btn-outline-secondary"><span class="glyphicon glyphicon-home"></span></button> <button type="button" class="btn btn-outline-secondary"><span class="glyphicon glyphicon-home"></span></button> </div> </div> </div>

/* relevant styles */ .chart__wrap { position: relative; height: 200px; width: 257px; background: green; } .chart-toolbar_layer { position: absolute; top: 0; right: 0; /* background: rgba(36, 62, 206, 0.6);*/ color: red; visibility: hidden; opacity: 0; /*display: flex; align-items: center; justify-content: center;*/ /* transition effect. not necessary */ transition: opacity .2s, visibility .2s; } .chart__wrap:hover .chart-toolbar_layer { visibility: visible; opacity: 0.8; } .chart-toolbar { transition: .2s; transform: translateY(1em); } .chart__wrap:hover .chart-toolbar { transform: translateY(0); }