Html CSS-将图像悬停以使单独的div淡入

我在这里有一个网站：如果你向下滚动到学院部分的最新新闻，你会看到两篇特色博客文章。我有一个很好的悬停状态，在那里图像会增长

但是，随着图像的增长，在图像悬停的时候，我想要一个字幕（在一个单独的div中）淡入并变得可见。当前的透明度为

opacity:0我想转换成
不透明度：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; ?>



有人知道我哪里出了问题吗？
非常感谢！这是一个很好的解决方案，我不想把鼠标悬停在容器上谢谢
<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;
}