Tekst wysuwany od lewej

IMIĘ I NAZWISKO

DOM | KLASA | ZAJĘCIA DODATKOWE | DATA URODZENIA | STATUS KRWI

<style type="text/css">

.container {

  position: relative;

}

.image {

  display: block;

height: auto;

}

.overlay {

  position: absolute;

  bottom: 0;

  left: 25px; /*skąd ma wysunąć się tło z tekstem*/

  right: 0;

  background: #322c30; /*kolor tła*/

  overflow: hidden;

  width: 0;

  height: 100%;

  transition: .5s ease;

}

.container:hover .overlay {

  width: 505px; /*szerokość tła z tekstem*/

}

.text {

  white-space: nowrap; 

  color: #fff; /*kolor czcionki*/

  position: absolute;

  overflow: hidden;

left:255px; /*pozycja tekstu na tle*/

top:250px; /*wysokość tekstu na tle*/

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

}

</style>

<div class="container"><center>

  <img src="link do zdjęcia" style="border: 1px solid #322c30; padding: 0px;" ></center>

  <div class="overlay">

    <div class="text"><div style="font-size: 50px; text-align: center;">

IMIĘ I NAZWISKO

<div style="font-size: 13px; text-align: center;border-top:2px solid #fff;">

DOM | KLASA | ZAJĘCIA DODATKOWE | DATA URODZENIA | STATUS KRWI

</div>

</div>

</div>

  </div>

</div>