Элементы, находящиеся рядом с друг другом, при наличии opacity просвечивают друг друга. Как справится с этим?

Question

[Igness_Music]

Есть 4 рядом стоящих блока с разным z-index. При отсутствии у них opacity - они друг друга правильно перекрывают, но если его добавить, начинают просвечивать друг друга, как на скриншоте. Как справится с ситуацией?

prntscr.com/9ia2i6

Необходимо, чтобы опасити остался, но чтоб блок, с более высоким z-index не просвечивал в блок с более низким.

Вариант с двумя картинками рассмотрен и будет использован если других вариантов не будет. Нужно решение с использованием css/js и при наличии только одной непрозрачной картинки.

Comments

[Yakov Vylegzhanin]

При отсутствии у них opacity - они друг друга правильно перекрывают, но если его добавить, начинают просвечивать друг друга, как на скриншоте.

Вам не кажется, что это правильный исход событий?
А вы пытаетесь найти неправильный. Зачем?

[Igness_Music]

Я понимаю, что это правильный исход. Конечный результат должен быть следующим: блок при наведении получает опасити: 1, и самый высокий z-index среди существующих рядом, таким образом выходя на первое место, а остальные скрываются сзади и выглядят полупрозрачными.

[mletov]

Igness_Music: Вы можете выложить дизайн макет того, как это выглядит при наведении?

[Igness_Music]

mletov: Спокойное состояние: prntscr.com/9iad3r
Состояние при наведении: prntscr.com/9iad8g

[Yakov Vylegzhanin]

Igness_Music: наложите на картинки полупрозрачный цвет фона в фотошопе и отключите прозрачность, например.

[Igness_Music]

Yakov Vylegzhanin: Решение с фотошопом итак очевидно. Хотелось бы узнать есть ли варианты через css/js каким-то образом это сделать, используя в арсенале только одну непрозрачную картинку.

[dom1n1k]

В каждый из 4-х дивов положить картинку и поверх нее маску из полупрозрачного цвета. Или наоборот, фоновый цвет и управлять прозрачностью картинки. Главное, чтобы в каждом элементе под низом лежало что-то непрозрачное, отсекающее другие элементы.

Answer 1

[Сергей delphinpro]

Фотошоп не нужен. Прозрачность не нужна.

Берете такую разметку

div>img
div>img
div>img

и примерно такие стили

div::after { rgba(цвет фона, прозрачность); pos:a; }

и управляете при наведении прозрачностью наложенного поверх картинки псевдоэлемента

Answer 2

[Александр]

Сделать opacity на весь контейнер, а не на отдельные блоки

Comments

[Igness_Music]

Александр, в таком случае не получится сделать потом опасити 1 для какого-то конкретного блока. Поэтому такой вариант не подходит.

Answer 3

[mletov]

Ну если ориентироваться на этот скриншот prntscr.com/9iad8g, и задний фон всегда монохромный без узоров и градиентов, то opacity вообще не нужен. Отрисовать каждый кружок в 2 состояниях, активный и пассивный, а при наведении играться с z-index и src

Comments

[Igness_Music]

Решение с фотошопом и двумя картинками итак очевидно. Хотелось бы узнать есть ли варианты через css/js и только с одной картинкой.

[mletov]

Иногда самое очевидное решение - самое правильное:) А все картинки можно в один спрайт закатать