CSS - 将鼠标悬停在图像上以使单独的 div 淡入

Question

我这里有一个网站：https://seedcreativeacademy.co.uk-如果您向下滚动到学院的最新消息部分，您将看到两篇精选博客文章。我有一个很好的悬停状态，图像会增长。

但是，随着图像的增长，在

将鼠标悬停在图像上时，我希望字幕(在单独的div中(淡入并变得可见。它目前opacity: 0;，我想过渡到opacity: l;我有以下代码，但它似乎不起作用：

.feat-sub-title {
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 9999;
    background: rgba(248, 79, 84, 0.8);
    padding: 15px 15px 5px 25px;
    opacity: 0;
}

.feat-image img:hover +.feat-sub-title {
    opacity: 1;
}
.feat-image img {
    position: absolute;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.feat-image img:hover {
    -moz-transform: scale(1.06);
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}

这是输出两个帖子的 PHP 循环：

<?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>

        <div class="feat-post">
            <a href="<?php the_permalink(); ?>">
                <div class="feat-title">
                    <h3><?php the_title(); ?></h3>
                </div>
            </a>
            <a href="<?php the_permalink(); ?>">
                <div class="feat-sub-title">
                    <h4><?php the_field('subtitle'); ?></h4>
                </div>
            </a>
            <a href="<?php the_permalink(); ?>">
                <div class="feat-image">
                    <?php the_post_thumbnail(); ?>
                </div>
            </a>
        </div>

      <?php endwhile; ?>

谁能看出我哪里出了问题？

Answer 1

<div class="feat-post">
        <a href="https://seedcreativeacademy.co.uk/what-is-seo-getting-ranked-on-the-only-page-that-matters/">
            <div class="feat-title">
                <h3>What is SEO?</h3>
            </div>
        </a>
        <a href="https://seedcreativeacademy.co.uk/what-is-seo-getting-ranked-on-the-only-page-that-matters/">
            <div class="feat-sub-title">
                <h4>Getting Ranked on The Only Page That Matters!</h4>
            </div>
        </a>
        <a href="https://seedcreativeacademy.co.uk/what-is-seo-getting-ranked-on-the-only-page-that-matters/">
            <div class="feat-image">
                <img width="1920" height="1271" src="https://seedcreativeacademy.co.uk/wp/wp-content/uploads/2017/10/What-is-SEO-banner.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="What is SEO?" srcset="https://seedcreativeacademy.co.uk/wp/wp-content/uploads/2017/10/What-is-SEO-banner.jpg 1920w, https://seedcreativeacademy.co.uk/wp/wp-content/uploads/2017/10/What-is-SEO-banner-300x199.jpg 300w, https://seedcreativeacademy.co.uk/wp/wp-content/uploads/2017/10/What-is-SEO-banner-768x508.jpg 768w, https://seedcreativeacademy.co.uk/wp/wp-content/uploads/2017/10/What-is-SEO-banner-1024x678.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px">               </div>
        </a>
    </div>

使用您拥有的代码，您可以通过以下方式执行此操作：

.feat-post:hover .feat-sub-title {
      opacity: 1;
}