Overlay au survol d'une image d'article

Bonjour, je suis en train de créer un blog, je reviens vers vous pour créer un overlay au survol d'une image d'un article. En gros : lorsqu'on arrive sur la page, on voit l'image de l'article en question et au survol de la souris le titre de l'article s'affiche sur un fond noir.

Si vous voulez voir un meilleur rendu cliquez sur ce lien, qui mène à mon site web. En bas de la page s'affiche la liste des 3 derniers articles , où j'ai réussi à créer l'effet overlay. https://leblogdelunatia.blogspot.com/

Je n'ai par contre pas réussi à créer le même rendu sur les pages de tous les articles classés par libellés. Exemple sur ce lien : https://leblogdelunatia.blogspot.com/search/label/Soin%20capillaire

C'est la cata ça fait des jours que je taffe dessus mais rien n'y fait. C'est le <data:post.body/> que je n'arrive pas à trop gérer

Maintenant voici le fameux code pour les pages classés par libellés.

Le blog est fait sur blogger à partir du modèle simple que j'ai ultra-modifié. Vous pouvez aussi aller sur mon blog faire clique droit inspecter l'élément si c'est mieux pour vous !

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
<div class='post-thumb'>
<div class='post-thumb'>
<a href=''><div class='thumb' style='background-image:url(&apos;&apos;);'><data:post.body/></div></a>
</div>
</div>
<div class='post-info'>
<div class='container'>
<h3 class='post-title entry-title' itemprop='name'>
<a href=''/>
</h3>
<div class=''>
<a href='' title=''/>
</div>
</div>
</div>
 
<a href=''/>
 
                                    <div style='clear: both;'/>
                                    <!-- clear for photos floats -->
                                  </div>
 
 
<b:skin>
 
.index .date-outer .post-info {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #000000;
    text-align: center;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
 
.post-thumb {
width: 94% !important;
height: 650px;   /* Hauteur des images */
    overflow: hidden;
}
 
.post-thumb .thumb {
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-size: cover;
}
 
.post-info {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #ffffff;
    text-align: center;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
 
 
 
/* ------------- Apparence ------------- */
 
 
h3.post-title.entry-title {
margin-left: 10px;
    padding: 0 20px;
    font: normal normal 24px &#39;Open sans&#39;, sans-serif;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1.8;
}
 
h3.post-title.entry-title a {
color: #2A3848;
}
 
h3.post-title.entry-title a:hover {
color: #000000;   /* Couleur Titres quand survolés par la souris */
font-weight: bold;
transition-duration: 0.4s;
}
</:b:skin>

Merci de m'aider et bonne chance pour ceux qui s'y collent.

Si j'ai bien compris, le soucis arrive lorsque l'utilisateur arrive sur la page "Hydrater sa peau" par exemple? Ce sont ces images là que tu veux en overlay?

Non ce sont les images qui sont affichés par libellés par exemple dans soin du corps et visage ou bien-être. Normalement les images bugs et sont trop longues et mal disposées