Zamiast tutka - kod z komentarzami:
<!DOCTYPE html>
<html lang="pl" dir="ltr" class="no-js">
<head>
<meta charset="UTF-8">
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
<title>Ehhhh</title>
<style>
.tile
{
display: inline-block;
width: 320px; /*ustawiamy wymiary jak dla obrazka w tle*/
height: 220px;
overflow: hidden; /*to żeby nic nie wystawało*/
position: relative;/*to, żebyśmy mogli pozycjonować elementy wewnątrz takiego "kafelka"*/
}
.tile-img, .tile-caption /*obrazek tła, jak i etykietkę rozciągamy na cały "kafelek"*/
{
position: absolute;
top: 0;
bottom: 0; /*ustawienie zerowej odległości od góry i od dołu równocześnie rozciąga element na całego rodzica*/
left: 0;
right: 0; /*w poziomie też to działa*/
}
.tile-caption
{
background: rgba(10, 250, 20, .4); /*etykietce nadajemy półprzezroczyste tło*/
padding: 20px; /*jakieś tam style ;)*/
top: 100%; /*każemy mieć etykietce zerową wysokość (top: 100% = bottom: 0)*/
transition: top .3s ease-in-out; /*każemy przeglądarce animować własność top (czyli odległość tego elementu od górnej krawędzi rodzica)*/
}
.tile:hover .tile-caption /*gdy najedziemy na kafelek…*/
{
top: 0; /*…etykietka ma powędrować do góry*/
}
</style>
</head>
<body>
<figure class="tile"> <!-- zamiast <figure> może być np. <div> -->
<img src="https://www.comandeer.pl/images/tooltips/poland.png" class="tile-img" width="320" height="220" alt=""> <!-- obrazka bym nie tykał ;) Pusty [alt], bo cały opis jest w .tile-caption a nie potrzeba dublować treści -->
<figcaption class="tile-caption"> <!-- jeśli zamiast <figure> masz <div>, to tutaj zmień też na <div> -->
<p>Napisik</p>
</figcaption>
</figure>
</body>
</html>