@media only screen and (min-width: 768px){
  .liste {
  position: relative;
}

.middle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 96.5%;
  height: 0;
  transition: .5s ease;
}

.liste:hover .middle {
  height: 25%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

}

@media only screen and (max-width: 767px){
  .liste {
    position: relative;
  }
  .middle {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 96.5%;
  height: 0;
  transition: .5s ease;
}

.text {
  white-space: pre-line;
  color: white;
  background-color: crimson;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  overflow: hidden;
  top: 87%;
  left: 48%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
    
  }