Mit csináljak, hogy amikor elveszem az egeret a képről a szöveg lassan tűnjön el?

Tisztelt Programozók!

Írtam egy kódot, mely egy fotóalbumhoz tartozik.

Amikor az egeret a kép fölé viszem megjelenik a szöveg rajta, mely alulról jön felfele lassan.

Amikor elveszem az egeret szeretném, ha a szöveg lassan menne lefele is amikor eltűnik, de azt sajnos nem tudtam beállítani.

Kérem, ha valaki tud, segítsen!

Köszönöm!

<div class="photo-album-all">

<div class="photo-album">

<a class="images-album-links" href="" target="_self">

<span class="darken"></span>

<div class="text-overlay">

<div class="album-infos">

<p class="album-title">

Képek - 2016

</p>

<p class="photos">

Fénykép: 16

</p>

</div>

</div>

<img src="kep.jpg" alt="Kép" width="370" height="370" max-width=100%">

</a>

</div>

</div>

css:

.photo-album {

width: 370px;

height: 370px;

float: left;

}

.photo-album a .darken {

opacity: 0;

height: 370px;

position: absolute;

text-decoration: none;

width: 370px;

max-width: 100%;

background-color: rgba(28, 28, 28, 0.7);

background-image: none;

background-repeat: repeat;

background-attachment: scroll;

background-position: 0% 0%;

background-clip: border-box;

background-origin: padding-box;

background-size: auto auto;

overflow: hidden;

transition-property: all;

transition-duration: 0.4s;

transition-timing-function: ease;

transition-delay: 0s;

}

.photo-album a:hover .darken {

opacity: 0.7;

}

.photo-album a .text-overlay {

opacity: 1;

position: absolute;

text-decoration: none;

transition: all 0.5s ease-out;

transition-property: all;

transition-duration: 0.5s;

transition-timing-function: ease-out;

transition-delay: 0s;

text-align: left;

}

.photo-album a .text-overlay .album-infos {

float: left;

width: 350px;

height: 100px;

position: absolute;

padding-top: 250px;

padding-left: 10px;

padding-right: 10px;

visibility: hidden;

opacity: 0;

-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;

transition: transform 0.5s, opacity 0.5s;

transition-property: transform, opacity;

transition-duration: 0.5s, 0.5s;

transition-timing-function: ease, ease;

transition-delay: 0s, 0s;

}

.photo-album a:hover .album-infos {

visibility: visible;

opacity: 1;

-webkit-transform: translate3d(0, -10px, 0);

transform: translate3d(0, -10px, 0);

}