bild in liste bei a:hover verdunkeln/abdecken

Hallo,

über yarpp (yarpp-template-random.php) lasse ich mir eine Liste der „verwandten Artikel“ bzw. „weiterführenden Artikel“ unter den Beiträgen mit dem featured image über folgenden Code ausgeben:

<ul>
…
<li>
<a href="<?php the_permalink() ?>" title="zum Beitrag" rel="bookmark">
<div class="thumb"><?php the_post_thumbnail(); ?></div>
<?php the_title(); ?><span><?php echo apply_filters( 'the_content', wp_trim_words( strip_tags( $post->post_content ), 15, ' ... <strong>| mehr</strong>' ) ); ?></span></a>
</li>
</ul>

In der style.css habe ich die Liste bzw. das Listenelement wie folgt ausgegeben:

.yarpp-related ul {margin:0;padding:0;}
.yarpp-related li {border:1px solid;border-color:#9d9d9d;border-radius:4px;box-shadow:3px 3px 1px #9d9d9d;font-size:12px;background: linear-gradient(to top, #f5f5f5, #fff 10%);line-height:1;list-style-type:none;height:120px;margin:15px 0;}
.yarpp-related li a{color:#000;text-decoration:none;padding:20px;display:block;font-size:18px}
.yarpp-related li a p{font-size:11px;line-height:1;margin:5px 0;}
.yarpp-related li a img{width:12%;height:12%;float:right;}
.yarpp-related li span{font-size:13px;line-height:1;margin:5px 0;font-weight:400}
.yarpp-related li a:hover{background-color:#3f3f3f;color:#fff;border-radius:4px;box-shadow:3px 3px 1px #9d9d9d;height:120px;}

Soweit, so gut … Aber die Bilder sollen beim „hovern“ verschwinden oder abgedukelt werden.

Einige Stunden Kopfzerbrechen haben mich nicht weitergebracht.

Wie kann ich erreichen, dass das Bild in dem Listenelement (div class=“thumb“) beim Überfahren des Listenelementes verdeckt/abgedunkelt wird? Versucht habe ich es u. a. mit:

.yarp-related li a:hover img (oder .thumb / thumb oder img.alignright) {display: none;} oder {opacity: 0.8 …;}

Nichts passiert! Ich kenne keine Lösung – vielleicht hat hier jemand eine Idee?

Dankbar für Hilfe!

Grüße
Sönke

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]