JSFiddle - React, Tailwind, and code Playground

Image with overwindows

by Zonedark

HTML

<div class="back">
  <div class="ice1">
  <div style="position:relative;width:100%;height:100%">
  <div class="subice1">
    Glaçon pas cher 5€ (non compatible avec pastis)
    </div>
  </div>
  </div>
  
  <div class="ice2">
  <div style="position:relative;width:100%;height:100%">
  <div class="subice2">
   Glaçon #2 (toujours pas compatible avec du jaune)
    </div>
  </div>
  </div>
  
  <div class="ice3">
  <div style="position:relative;width:100%;height:100%">
  <div class="subice3">
    Glaçon #3 (celui ci fait 2€ de plus)
    </div>
  </div>
  </div>
</div>

CSS

.back{
  width:800px;
  height:600px;
  background-image: url("http://www.tbwnz.com/image6/pipvjvssqoesfumzkdzf.jpg");
  position:relative;
}

.ice1{
  position:absolute;
  width:150px;
  height:150px;
  top:60%;
  left:12%;
}
.ice2{
  position:absolute;
  width:150px;
  height:150px;
  top:45%;
  left:35%;
}
.ice3{
  position:absolute;
  width:150px;
  height:150px;
  top:60%;
  left:70%;
}

.ice1 .subice1, .ice2 .subice2, .ice3 .subice3{
  display:none;
}

.ice1:hover .subice1, .ice2:hover .subice2, .ice3:hover .subice3{
  position:absolute;
  width:100px;
  height:150px;
  background-color:white;
  z-index:50;
  left:100px;
  top : -150px;
  border:solid 1px lightgrey;
  display:block;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
}