Could there be a CSS solution to this dilemma or would we need the assistance of JavaScript to navigate the DOM? Here's the HTML snippet in question:
<div class="thumb_ctn">
<div class="overlay">
<div id="link_text">SOME LINK TEXT</div>
</div>
<figcaption>SOME OTHER TEXT</figcaption>
</div>
Essentially, the desired effect is for the opacity of "overlay" to change from 0 to 1 when hovering over the figcaption element.
Any insights or solutions would be greatly appreciated. Thank you!