Класс не добавляется jQuery

Question

Мне нужно добавить темное наложение на изображения, добавив класс imgoverlay, используя jQuery.

$("#featured .row .col-sm img").hover(
  function() {
    $(this).addClass('imgoverlay');
  },
  function() {
    $(this).removeClass('imgoverlay');
  }
);

.imgoverlay {
  height: 100%;
  background-color: rgba(18, 15, 65, 0.7);
  z-index: 2000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main" id="featured" data-aos="fade-up">
  <div class="container">

    <div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
      <div>
        <span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
      </div>
      <div>
        <a href="#">
          <p align="right"><strong>  مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
        </a>
        </a>
      </div>
    </div>



    <!-- Gallery start -->
    <div class="row ">
      <div class="col-sm">
        <a href="">
          <div class="thumb1"><img name="Auoya" src="assets/images/thumb1resize.jpg" alt=""></div>
        </a>
        <a href="">
          <div class="thumb1"><img name="capitalHeights" src="assets/images/thumb2resize.jpg" alt=""></div>
        </a>
      </div>
      <div class="col-sm">
        <a href="">
          <div class="thumb2"><img name="hai-sakani" src="assets/images/thumbMiddleresize.jpg" alt=""></div>
        </a>
      </div>
      <div class="col-sm">
        <a href="">
          <div class="thumb1"><img name="bosco" src="assets/images/thumb3resize.jpg" alt=""></div>
        </a>
        <a href="">
          <div class="thumb1"><img name="armonia" src="assets/images/thumb4resize.jpg" alt=""></div>
        </a>
      </div>
    </div>
  </div>
</section>

Answer 1

Pure CSS

Вы можете использовать pseudo element ::after или ::before, не нужно использовать JS или jQ, просто добавьте глобальный class и установите hover эффект на ::after и активация на :hover

.thumbs:hover::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(18, 15, 65, 0.7);
}

.thumbs {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border: 1px solid red;
    position: relative;
}

<section class="main" id="featured" data-aos="fade-up">
  <div class="container">

    <div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
      <div>
        <span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
      </div>
      <div>
        <a href="#">
          <p align="right"><strong>  مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
        </a>
        </a>
      </div>
    </div>



    <!-- Gallery start -->
    <div class="row ">
      <div class="col-sm">
        <a href="">
          <div class="thumb1 thumbs"><img name="Auoya" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
        </a>
        <a href="">
          <div class="thumb1 thumbs"><img name="capitalHeights" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
        </a>
      </div>
      <div class="col-sm">
        <a href="">
          <div class="thumb2 thumbs"><img name="hai-sakani" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
        </a>
      </div>
      <div class="col-sm">
        <a href="">
          <div class="thumb1 thumbs"><img name="bosco" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
        </a>
        <a href="">
          <div class="thumb1 thumbs"><img name="armonia" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
        </a>
      </div>
    </div>
  </div>