CODEWITHSUNDEEP
javascripthtmlcssreactjs
user2387766
user2387766

Reputation:

How can I display an image overlay on all other images that are not currently being hovered over?

I have this rendering code in my component (this renders an unordered list of li elements that each have their own image):

<div className="thumbnail-photos-wrapper">
  {spot.thumbnail_image_urls ? spot.thumbnail_image_urls.map(url => 
    <div className="thumbnail-image-wrapper">
      <img src={url} alt="Thumbnail photo" />
    </div>) : ''}
</div>

And when I'm hovering over one of these images, I'd like for the other images to be grayed out. I've found solutions about graying/blacking out the entire background, but that's not quite what I need; I'd only like the images that are not being hovered over grayed out.

I've also read that it's better to use states to interact with HTML elements in a JS/React app, however, I don't think that would work. If I had dynamic HTML classes in the render code above that depended on toggling the state, it would toggle all of the class names upon rerender (effectively changing all the class names for an image wrapper if the state was true or false; I only want to change the appearance of the non hovered images!).

I've also thought about doing something like this:

<div className="thumbnail-photos-wrapper">
  {spot.thumbnail_image_urls ? spot.thumbnail_image_urls.map(url => 
    <div className="thumbnail-image-wrapper">
      <div className="overlay-wrapper"></div>
      <img src={url} alt="Thumbnail photo" />
    </div>) : ''}
</div>

Where I have a separate div to hold the overlay. I was thinking that I could have this overlay-wrapper initially have a display: none (or something else to that effect), and then when the user hovers over an image, it becomes visible. However, I believe that this would also put an overlay on the hovered image, which is not what I want.

Help is appreciated!

Upvotes: 2

Views: 879

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19119

Update

I've added a CSS filter with a short transition as an idea for a straightforward overlay, in place of changing opacity.

At the risk of oversimplifying this, you can use CSS negation to handle this task.

From MDN:

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

.thumbnail-photos-wrapper:hover .thumbnail-image-wrapper:not(:hover) {
  filter: brightness(.33);
}

.thumbnail-image-wrapper {
  transition: filter 0.3s ease-in-out;
}

/* For styling puroses only — ignore */
.thumbnail-photos-wrapper { display: inline-block; }
<div class="thumbnail-photos-wrapper">
  <div class="thumbnail-image-wrapper">
    <img src=http://placekitten.com/50/50 alt="Thumbnail photo" />
  </div>
  <div class="thumbnail-image-wrapper">
    <img src=http://placekitten.com/50/50 alt="Thumbnail photo" />
  </div>
  <div class="thumbnail-image-wrapper">
    <img src=http://placekitten.com/50/50 alt="Thumbnail photo" />
  </div>
</div>

jsFiddle

Upvotes: 1

Related Questions