How to apply Javascript mouseover css effects to all elements with the same class name?

Question

I want to increase the opacity to 1 for img__text when the user hovers over text__container . I have tried achieving this with strictly CSS by trying to effect the child of text__container like so, #text__container ~ .img__text then applying the desired CSS effects.

Index.html

<div class="gallery__container">
  <div>
    <img class="gallery__img" src="./images/image1.png" alt="">
    <div id="text__container">
      <span class="img__text">Shake & Shot</span>
    </div>
  </div>
  <div>
    <img class="gallery__img" src="./images/image2.png" alt="">
    <div id="text__container">
      <span class="img__text">It's On</span>
    </div>
  </div>
  <div>
    <img class="gallery__img" src="./images/image3.png" alt="">
    <div id="text__container">
      <span class="img__text">Shake & Shot</span>
    </div>
  </div>
  <div>
    <img class="gallery__img" src="./images/image4.png" alt="">
    <div id="text__container">
      <span class="img__text">Shake & Shot</span>
    </div>
  </div>
  <div>
    <img class="gallery__img" src="./images/image5.png" alt="">
    <div id="text__container">
      <span class="img__text">Shake & Shot</span>
    </div>
  </div>
  <div>
    <img class="gallery__img" src="./images/image6.png" alt="">
    <div id="text__container">
      <span class="img__text">Shake & Shot</span>
    </div>
  </div>
</div>

Style.scss

//Gallery
  .gallery__container {
    margin-top: 5%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    div {
      background-color: #000;
      width: 49%;
      margin: 0 0 2% 0;
      height: 665px;
      display: grid;
      
      img {
        grid-column: 1;
        grid-row: 1;
        height: 100%;
        width: 100%;
        z-index: 1;
        align-content: center;
        transition: 0.8s ease-out;
        opacity: 1;
        &:hover {
          transition: 0.8s ease-in;
          cursor: pointer;
          opacity: 0.5;
        }
      }
      #text__container {
        border: 1px solid red;
        text-align: center;
        align-self: center;
        grid-column: 1;
        grid-row: 1;
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        height: 100%;
        margin: 0;
        z-index: 2;
        background-color: transparent;
        transition: 0.8s ease-out;
        &:hover {
          transition: 0.8s ease-in;
          background-color: rgba(0,0,0,0.5);
        }
        .img__text {
          border: 1px solid red;
          text-align: center;
          align-self: center;
          z-index: 3;
          color: #fff;
          font-family: $main-font;
          font-size: 2rem;
          width: 50%;
          margin: 0 auto;
          transition: 0.8s ease-out;
          opacity: 0;
        }
      }
    }
  }

Script.js

//Variables
var imgContainer = document.getElementById('text__container');
var imgText = document.getElementsByClassName('img__text');

for (i = 0; i < imgText.length; i++) {
  imgContainer.addEventListener('mouseover', function() {
    imgText[i].style.opacity = "1";
    imgText[i].style.transition = "0.8s ease-in";
  });

  imgContainer.addEventListener('mouseleave', function(){
    imgText[i].style.opacity = "0";
    imgText[i].style.transition = "0.8s ease-out";
  });
}

Answer 1

You have multiple elements with the same id - change that to a clas. Also your code needs to use let in the loop if you want to assign events. Finally it's mouseout not mouseleave .

This works.

 var imgContainer = document.getElementsByClassName('text__container'); var imgText = document.getElementsByClassName('img__text'); for (let i = 0; i < imgText.length; i++) { imgContainer[i].addEventListener('mouseover', function() { imgText[i].style.opacity = "1"; imgText[i].style.transition = "0.8s ease-in"; }); imgContainer[i].addEventListener('mouseout', function(){ imgText[i].style.opacity = "0"; imgText[i].style.transition = "0.8s ease-out"; }); }

 .gallery__container { margin-top: 5%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; div { background-color: #000; width: 49%; margin: 0 0 2% 0; height: 665px; display: grid; img { grid-column: 1; grid-row: 1; height: 100%; width: 100%; z-index: 1; align-content: center; transition: 0.8s ease-out; opacity: 1; &:hover { transition: 0.8s ease-in; cursor: pointer; opacity: 0.5; } } .text__container { border: 1px solid red; text-align: center; align-self: center; grid-column: 1; grid-row: 1; background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; margin: 0; z-index: 2; background-color: transparent; transition: 0.8s ease-out; &:hover { transition: 0.8s ease-in; background-color: rgba(0,0,0,0.5); } .img__text { border: 1px solid red; text-align: center; align-self: center; z-index: 3; color: #fff; font-family: $main-font; font-size: 2rem; width: 50%; margin: 0 auto; transition: 0.8s ease-out; opacity: 0; } } } }

 <div class="gallery__container"> <div> <img class="gallery__img" src="https://via.placeholder.com/100" alt=""> <div class="text__container"> <span class="img__text">Shake & Shot</span> </div> </div> <div> <img class="gallery__img" src="https://via.placeholder.com/100" alt=""> <div class="text__container"> <span class="img__text">It's On</span> </div> </div> <div> <img class="gallery__img" src="https://via.placeholder.com/100" alt=""> <div class="text__container"> <span class="img__text">It's On</span> </div> </div> <div> <img class="gallery__img" src="https://via.placeholder.com/100" alt=""> <div class="text__container"> <span class="img__text">It's On</span> </div> </div> </div>