CODEWITHSUNDEEP
javascripthtmlcss
Maivan Fildero
Maivan Fildero

Reputation: 187

Hover over image to add effect, hover again to make it dissapear

I have a few images displayed. First, they are all black grayscaled and I want to add effects so that when you hover over an image its grayscale becomes 0 and stays 0 until I hover over that image again.

I saw that a few people use javascript to add a class but I am not sure how to revert back to grayscale 100% after the first hover.

 <div id="photos">
      <div class="images">
        <img src="/photographs/clouds.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/DogPrint.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/euro.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/FireHead.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/wasabi.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/sam.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/roli.jpg" />
      </div>
    </div>

img {
  width: 100%;
  filter: grayscale(100%);
  border-radius: 2px;
  transition: all 0.25s ease-in-out;
}
#photos {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin-top: 200px;
  margin-left: 200px;
}

Upvotes: 2

Views: 273

Answers (2)

shreyasm-dev
shreyasm-dev

Reputation: 2844

I just added a little bit of Javascript to make it work, and even a transition.

JSFiddle - https://jsfiddle.net/8850s/oj5rcv8n/

HTML -

    <div id="photos">
      <div class="images">
        <img src="/photographs/clouds.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/DogPrint.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/euro.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/FireHead.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/wasabi.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/sam.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/roli.jpg" />
                <div>
                Text
                </div>
      </div>
</div>

JS -

    var images = document.querySelectorAll('#photos > .images > img')
for (var i = 0; i < images.length; i ++) {
    images[i].style.transitionDuration = '0.1s'
    images[i].nextElementSibling.style.transitionDuration = '0.1s'
    images[i].nextElementSibling.style.opacity = '0'
    images[i].addEventListener('mouseenter', function() {
        if (this.style.filter === "grayscale(100%)") {
        this.style.filter = "grayscale(0%)";
            this.nextElementSibling.style.opacity = "0";
    } else {
        this.style.filter = "grayscale(100%)";
            this.nextElementSibling.style.opacity = "1";
    }

    })
}

CSS - 

img {
  width: 100%;
  filter: grayscale(100%);
  border-radius: 2px;
  transition: all 0.25s ease-in-out;
}

#photos {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin-top: 200px;
  margin-left: 200px;
}

Upvotes: 2

Simon Bruneaud
Simon Bruneaud

Reputation: 2567

You can attach a 'mouseover' event listener on each image element.
When this event is triggered you can just add or remove a className using element.classList.toggle('classname').

Live example

 <body>
    <div id="photos">
      <div class="images">
        <img
          class="grayscale-image"
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/500px-Image_created_with_a_mobile_phone.png"
        />
      </div>
    </div>
  </body>
  <script>
    const imgs = document.getElementsByClassName("grayscale-image");
    for (let i in imgs) {
      const currentImg = imgs[i];
      currentImg.addEventListener("mouseover", e => {
        currentImg.classList.toggle("image-color");
      });
    }
  </script>


img {
  width: 100%;
  filter: grayscale(100%);
  border-radius: 2px;
  transition: all 0.25s ease-in-out;
}
#photos {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin-top: 200px;
}
.image-color {
  filter: grayscale(0%);
}

Upvotes: 0

Related Questions