JSFiddle - React, Tailwind, and code Playground

by NinjaBeaver

HTML

<div class="information_popup_container">
<div class="information">
<figure><img loading="lazy" class="" src="http://staging.vgcp2022.alphapunk.com/wp-content/uploads/2022/09/NovelPodcast-764x1024.jpg" alt="Novel Podcast" width="300" height="auto"></figure>
</div>
<div>
<h2>Novel</h2>
<p>Creators of highly original, award-winning podcasts.</p>
</div>
<div class="popup_information">
<h3><a href="#">Read more</a></h3>
</div>
</div>

CSS

.information_popup_container > .popup_information {
  visibility: hidden;
  transition-duration: 8s;
  transition-timing-function: ease-out;
}
.information_popup_container > .information:hover ~ .popup_information {
  visibility: visible;
  display: block;
}