How to hover an image in WordPress?

Question

JavaScript

Hello, tell me how to make the hover effect apply only to the hovered image and not to all at the same time in Wordpress?

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

.post-container a {
  position: relative;
}
.post-container h3 {
   margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    display: none;
}
.post-container:hover img{
opacity: 0.4;
}
.post-container:hover h3{
display: block;
}

Answer 1

https://learn.javascript.ru/onscroll
When scrolled to the desired element, add a class and animation (if needed).
jquery will be easier to do.