Наведите указатель мыши на изображение и затемньте окружающие изображения

Для уточнения: я не спрашиваю, как затемнить изображение, когда вы наводите на него курсор. Мне интересно, как сделать другие изображения, окружающие изображение курсором, темнее.

Here is an example: http://www.b-reel.com/

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

Любой вход был бы оценен. Спасибо!

0
nl ja de

2 ответы

В приведенном примере они используют JavaScript для применения класса .fadeOut в других div. Этот класс .fadeOut устанавливает opactiy других разделов на 50%.

1
добавлено

Вы не делаете окружающие изображения темнее. Вместо этого вы помещаете div вокруг всех изображений, а когда курсор находится над этим div , все изображения темнее. Но вы также добавляете элементы div вокруг каждого изображения, и вы делаете изображение менее темным, когда курсор над ним. Сочетание того и другого дает вам желаемый эффект.

1
добавлено
Пожалуйста, добавьте свой код в исходное сообщение, это упростит чтение. На самом деле, положить его на jsFiddle будет еще лучше.
добавлено автор Ismael Ghalimi, источник
Я новичок в JQuery, поэтому решил сначала попробовать ваш метод. Я использую фоновые изображения вместо изображений ради моего дизайна. Я могу получить все изображения, чтобы затемнить при наведении, но у меня возникают проблемы с тем, что одиночные изображения остаются на 100% непрозрачности при наведении. Вот упрощенная версия моего кода: edit: Я такой новичок в форматировании этих сообщений, извините!
добавлено автор Lauren, источник
<div id = "all"> <div class = "square"> </div> <div class = "square"> </div> <div class = "square"> </div> </div>
добавлено автор Lauren, источник
Спасибо за ваше терпение. Вот jsFiddle. Как вы можете видеть, я изо всех сил пытаюсь выделить отдельные квадраты.
добавлено автор Lauren, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)