Как я могу отобразить наложение изображений на все другие изображения, которые в данный момент не отображаются?

Question

У меня есть этот код рендеринга в моем компоненте (при этом отображается неупорядоченный список li элементов, каждый из которых имеет свое изображение):

<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>

И когда я нахожусь над одним из этих изображений Я хотел бы, чтобы другие изображения были серыми. Я нашел решения о серости / затемнении всего фона, но это не совсем то, что мне нужно; Мне бы хотелось, чтобы только изображения, которые не отображаются в сером цвете.

Я также читал, что лучше использовать состояния для взаимодействия с HTML элементами в приложении JS / React, однако я не думаю, что это сработает. Если бы в приведенном выше коде рендеринга имелись динамические c HTML классы, которые зависели от переключения состояния, при переключении он переключал бы все имена классов (эффективно изменяя все имена классов для оболочки изображений, если состояние было истинным или false; я хочу изменить только внешний вид необнаруженных изображений!).

Я также думал о том, чтобы сделать что-то вроде этого:

<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>

Где у меня есть отдельный div для держите оверлей Я думал, что у этого overlay-wrapper может быть изначально display: none (или что-то еще на этот счет), а затем, когда пользователь наводит курсор на изображение, оно становится видимым. Тем не менее, я считаю, что это также наложило бы наложенное изображение, а это не то, что я хочу.

Помощь приветствуется!

Answer 1

Обновление

Я добавил CSS filter с коротким переходом в качестве идеи для простого наложения, вместо изменения opacity.

---

С риском упрощения этого вы можете использовать отрицание CSS для выполнения этой задачи.

С MDN :

: не ( ) CSS псевдокласс представляет элементы, которые не соответствуют списку селекторов. Поскольку он предотвращает выбор определенных c элементов, он известен как псевдокласс .

.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

Answer 2

Если подход React - это то, что вы искали, может быть полезен следующий метод:

---

• создать компонент миниатюры с наложением поверх изображения
• prepare visible переменная в состоянии миниатюрного компонента для управления видимостью оверлея
• отслеживание ввода / вывода мыши с помощью синтезатора c событий onMouseEnter / onMouseLeave для установки visible в true или false

Демоверсию можно найти здесь:

const { useState } = React,
      { render } = ReactDOM

const srcImages = [
  'https://live.staticflickr.com/7428/26278034593_cff220e6d1_n.jpg',
  'https://live.staticflickr.com/3731/8854337932_93bf7fb431_h.jpg',
  'https://live.staticflickr.com/7505/16065135978_067e2794ba_k.jpg'
]

const Thumbnail = ({src}) => {
  const [visible, setVisible] = useState(false)
  return (
    <div className="thumb" onMouseEnter={() => setVisible(true)} onMouseLeave={() => setVisible(false)}>
      <img {...{src}}  />
      {!visible && <div className="overlay" />}
    </div>
  )
}

const Gallery = ({images}) => {
  return (
    <div>
      {
        images.map((src,key) => <Thumbnail {...{key,src}} />)
      }
    </div>
  )
}

render (
  <Gallery images={srcImages} />,
  document.getElementById('root')
)

.thumb {
  width: 200px;
  position: relative;
}

.thumb img {
  max-width: 200px;
}

.thumb .overlay {
  opacity: 0.7;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>