Transparence image / texte

.description { /*nom de la class*/
  display: block; /*définit le bloc*/
  width: 450px; /*largeur*/
  height: 105px; /*hauteur*/
  overflow: hidden; /*cache l'overflow*/
  bordure:solid 0px #; /*bordure que vous pouvez modifier*/
  font-size: 10px; /*taille de la police*/
  background-color: #d8efc5; /*couleur du fond*/
color: #000000; /*couleur de la police*/}

.description_contenu {
  position: absolute;
  display: block;
  width: 450px;
  height: 105px;
  overflow: auto;
  background-color: #d8efc5;
  font-size: 10px;
  color: #000000;
  text-align: justify;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.description_contenu:hover { /*nom de la class*/
  opacity: 0.8; /*intensité de l'opacité*/
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
 transform: all; /*assure la transition sur IE10*/
-moz-transform: all; /*assure la transition sur mozilla*/
-o-transform: all; /*assure la transition sur opera*/
-htm-transform: all;
-webkit-transform: all; /*assure la transition sur chrome et safari*/
transition: 1s; /*durée de la transition*/
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s; /*durée de la transition*/ }

<div class="description"><span style="display: block; width: 450px; height: 105px; background: url('URL DE L'IMAGE') center center no-repeat;"><span class="description_contenu"><div style="margin-left:15px; margin-right:15px; margin-bottom:10px; margin-top:10px;">votre texte de description au hasard</div></span></span></div>