How to add active class to article thumbnail?

Question

css

Hello, tell me how to make one image always visible, and remain visible, which was last hovered over.
On the layout, everything looks like this:

I twisted the last entries like this:

<div class="post-container">
      <?php query_posts('showposts=5'); ?>
      <?php while (have_posts()) : the_post(); ?>
      <?php if ( has_post_thumbnail()) { ?>
        <div class="">
                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
                  <h3><?php the_title(); ?></h3>
        <?php the_post_thumbnail(); ?>
      </a>
        </div>
    <?php } ?>
    <?php endwhile; ?>
    </div>

and set "opacity: 0;", and in hover; opacity: 1
But I don’t understand how to make one always active and the class is saved for the last hovered record

Answer 1

something like

const banners = document.querySelectorAll('.block');
banners.forEach(banner => {
  banner.addEventListener('mouseenter', (event) => {
    banners.forEach(innerBanner => innerBanner.classList.remove('active'));
    event.target.classList.add('active');
  });
});