Caption Reveal
This is a nice scenario where once you might have used JavaScript. You can check out the code below, but it’s easy enough to visualise how this one works.
- You have a
<figure>, and within that is the<img>and a<figcaption> - The
<figcaption>is positioned absolutely within the<figure>and has anopacityof 0 - On hovering the
<figure>we give the<figcaption>an opacity of 1 and abox-shadowto darken the background
Check out this Pen!