.cadre {
    
  position: absolute;   /* pour servir de référent */
    top: 10px;
    left: 10px;
            /* largeur à ajuster suivant le besoin */
       /* masque les dépassements */
  line-height: 2em;     /* pour centrage vertical */
}
.cadre img {
            /* image au dessus */
  position: absolute;   /* pour prise en compte z-index */
    top: 10px;
    left: 10px;
             /* largeur à ajuster suivant le besoin */
}
.cadre span {
  display: none;
  position: absolute;   /* positionnement hors flux */
    top: 6px;
    left: -10px;
            /* décalage à gauche toute */
  padding: 0 .25em;     /* un peu d'espace latéral */
  color: white;          /* couleur du texte à ajuster suivant le besoin */
  font-family: 'Questrial' ,'Open Sans', 'Helvetica Neue', Arial, sans-serif;     /* couleur du fond à ajuster suivant le besoin */
  transition: all .5s; /*  la transition à appliquer */
}




.cadre:hover span {
   
    display: block;
    left: 39px;
      
    
}

.legende{
    -moz-box-shadow: inset 10px 10px 30px 1px #000000;
-webkit-box-shadow: inset 10px 10px 30px 1px #000000;
-o-box-shadow: inset 10px 10px 30px 1px #000000;
box-shadow: inset 10px 10px 30px 1px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=30);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
    padding: 10px;
    position: absolute;
    bottom: 10px;
    left: 10px;
}
#legende{
    position: relative;
    font-family: 'Questrial', sans-serif;

    opacity: none;
    color:white;
}