JSFiddle - React, Tailwind, and code Playground

by Bohdan Doroshenko

HTML

<div class="hidden-bone-block">
<div class="bone-block">
<div class="bone-block">
<div class="bone-block">
<div class="bone-block">
<div class="bone-block">
<div class="bone-block">
    <img src="https://meetwalter.com/images/ui/skeleton-overlay-system.jpg" width=150/>
</div>
</div>
</div>
</div>
</div>
</div>

CSS

.hidden-bone-block{
  opacity: 0.0; 
}
.hidden-bone-block:hover{
  opacity: 1; 
}

.bone-block{
  display:block;
  float: left;
  padding: 30px;
  opacity: 0.5; 
  -webkit-transition: visibility 0.5s linear, opacity 0.5s linear; 
  -moz-transition: visibility 0.5s linear, opacity 0.5s linear; 
  -o-transition: visibility 0.5s linear, opacity 0.5s linear; 
}

.bone-block:hover  { 
  visibility: visible; 
  opacity: 1; 
}