I have an image where when you hover over it, an overlay appears, but because I've also added texts as well, the overlay doesn't appear when I hover over the texts too.
The issue is: I want the text to also display the overlay not only the image. If you click the image and the texts, it should redirect you to another url.
I thought about making the text into a separate css and call out another overlay but that'll make the image appear even darker, and quite possibly unnecessary extra overlays and text overlaps.
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;
}
Here's one of an example I want the hover effect to be: https://www.vogue.co.jp/
Thank you!
You need to add overlay class to parent to make it work
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.