圖片 Hover Overlay combined Text Hover Overlay

Question

我有一張圖片，當您在其上輸入 hover 時，會出現一個疊加層，但因為我也添加了文本，所以當我在文本上輸入 hover 時，疊加層不會出現。

問題是：我希望文本不僅顯示圖像還顯示疊加層。 如果您單擊圖像和文本，它應該會將您重定向到另一個 url。

我考慮過將文本制作成單獨的 css 並調出另一個疊加層，但這會使圖像看起來更暗，並且很可能不必要的額外疊加層和文本重疊。

HTML

<div class="item-masonry">
  <a href="<?php the_permalink();?>">
  <div class="posts">
    <p><h2>Title</h2></p>
    <p><h2>Date</h2></p>
    <p><h3>Excerpt</3></p>
  </div>
    <img src=""/>
    <div class="overlay"></div>
  </a>
</div>

CSS

.posts {
  position: absolute;
  z-index: 1;
  bottom: 5px;
  line-break: strict;
  color: white;
}

.overlay:after {
  content: '';
  position: absolute;
  display: block;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.overlay:hover:after {
  opacity:1;
}

這是我希望 hover 效果的示例之一： https://www.vogue.co.jp/

謝謝！

Answer 1

您需要將 overlay class 添加到 parent 以使其工作

<div class="js-masonry">
    <?php if( have_posts() ): while( have_posts() ): the_post();?>
        <div class="item-masonry overlay"> /*added overlay class here*/
            <a href="<?php the_permalink();?>">
            <div class="posts">
                <p><h2>Title</h2></p>
                <p><h2>Date</h2></p>
                <p><h3>Excerpt</3></p>
            </div>
                <img src="dummyurl"/>
                <div class=""></div>
            </a>
        </div>
    <?php endwhile; else: endif;?>
</div>