Transform:hover à appliquer sur first child

Bonjour à tous,
Avec du CSS,
Je souhaite crée un transform sur une image qui quand on passe la souris dessus, diminue sa hauteur pour laisser visible un texte.

Du coup mon idée pour réaliser cela (j'espère que ce n'est pas trop biscornu...):
J'ai crée une div container de la même height que mon image (qui est elle même dans une div)/ Quand je hover la div container, je veux appliquer la transition sur la div qui contient l'image (first child).

La transition fonctionne bien, mais ce qui me gêne c'est que la div container prend les dimensions de l'image en hover...
Mon code:

[code=html][b]HTML[/b]
 <div class="main_img_container">
            <div class="main_img"></div>
 </div>

[b]CSS[/b]
.main_img_content{
    height: 300px; /* dimension initial de l'image*/
}
.main_img:hover{
    height: 150px; /*dimension de l'image en hover */
    transition: height 2s  ;
}

[/code]


Est-ce possible d'appliquer un hover sur ma div container et appliquer un transform uniquement sur son first child ?
Sinon, des méthodes alternatives ?
Comment feriez vous ?

Merci
Modifié par admo (03 Jan 2020 - 21:56)

Bonsoir,
Erreur d'inattention: tu as mis comme nom de classe pour le parent:
"main_img_container" dans l'html et
"main_img_content" en CSS ;
donc ce CSS ne s'applique pas et ta div n'a pas de hauteur fixée (elle prend alors celle de son contenu).

Bonjour admo,
Essayes de voir du coté de :first-child

.main_img_container:hover  :first-child{
   height: 150px; /*dimension de l'image en hover */
    transition: height 2s  ;
}

Mais à mon avis le code ci-dessous devrait fonctionner

.main_img_container:hover .main_img{
   height: 150px; /*dimension de l'image en hover */
    transition: height 2s  ;
}

Concernant le HTML (cote sementique) regarde du côté de figcaption, au lieu de faire un div dans un div
A toi de voir, si cela correspond....

<figure>
    <img src="/media/examples/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>