Как один блок накладывать на разные hover элементы?

Question

[Евгений]

Ребята, подскажите, есть родитель (display: flex; justify-content: space-between;) и четыре дочерних элемента (<div class="img">), нужно при :hover дочернему элементу накладывать блок с текстом и иконкой, блок одинаковый, можно как-то один блок использовать для всех элементов? что-то не пойму как его позиционировать на нужном .img...

Comments

[Евгений]

Более правильная формулировка пришла в голову)
Как сделать так, чтобы у накладываемого блока с позишн абсолют, координаты 0, 0 считались от блока с картинкой, над которой сейчас находится курсор?)

[Natalia ivanova]

Если я правильно поняла вопрос, то блоку с картинкой задать относительное позиционирование.
Тогда координаты накладываемого блока будут считаться от него.

[Евгений]

Natalia ivanova, у меня 4 блока с картинками, и нужно один блок накладывать на картинку, на которой сейчас расположен курсор... нужно как-то менять точку отсчета позиционирования в зависимости от блока, который сейчас :hover, не знаю даже как объяснить по другому...

[Natalia ivanova]

Почему не разместить четыре одинаковых блока в разметке с позиционированием каждого от своей картинки?
Или этот блок при смене hover должен как-то перемещаться от картинки к картинке?

[Евгений]

Natalia ivanova, ну это альтернатива, чтоб не награмождать, хочется одним блоком универсально сделать....

[Евгений]

вот структура, нужно чтобы див с текстом накладывался на див с ховер)

[Natalia ivanova]

Тогда, боюсь, чистым css здесь не обойтись.

[Евгений]

Natalia ivanova, я еще не знаю всех возможностей, поэтому решил спросить... у меня как-то получилось стилизовать радио кнопки меня font-size соседнего тега в блоке, подумал что мало-ли, можно и такое провернуть)

[Шохрух Шаймардонов]

Евгений, покажите что хотите получить. Нарисуйте. С объяснением не особо понял

[Евгений]

Шохрух Шаймардонов, не нашел ниче) я хотел чтобы при наведении мыши, например, на 3 блок картинки, блок .hidden накрывал его, и так на любой из кода выше)) но чисто средствами css это наверно невозможно...

[Шохрух Шаймардонов]

Евгений, ну зависит от того, чем вы хотите накрыть его. Если какой-нибудь полупрозрачный блок с надписью, то можно

[Евгений]

Шохрух Шаймардонов, я выше кидал код структуры) если каждому блоку img сделать блок, который должен перекрывать, то это легко (я так и сделал) а вот иметь один блок и позиционировать его над другими блоками - универсально не придумал как... тут 2 вариата, либо разметка будет разрастаться, либо стили....

[Евгений]

Т.е. я придумал только один вариант, невидимому блоку дать абсолют, всем img дать второй класс, и при ховере позиционировать невидимый блок абсолютом над другими, но если размеры блока какого-то изменятся - все навернется...

[Шохрух Шаймардонов]

Евгений, а чем вас не устраивает использование before/after в css? Поэтому я спросил про то, что должно перекрывать (если слой с кучей картинок/блоков, то не подойдет, а если просто затемнение с текстом/фоном, то без проблем)

[Евгений]

Шохрух Шаймардонов, в макете картинку перекрывает блок с opasity 0.9, имеет иконку со стрелкой, заголовок и текст, как это все запихать в :before или :after я не разобрался... как я понял в content можно поместить что-то одно....

[Шохрух Шаймардонов]

Евгений, да тогда так не получится

[Евгений]

Шохрух Шаймардонов, ох уж эти разметки и стили) какие-то они ограниченные по сравнению с языками программирования))

Answer 1

[kulaeff]

Все просто, но нужен js.

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

https://jsfiddle.net/wxrbavsu/

Comments

[Евгений]

c js я знаю что это возможно... но задача стоит сверстать на css, спасибо за код, отмечу решением, но пришлось создавать каждому img свой hidden) css не умеет пока что получать координаты вызвавшего блока и не может блок сделать дочерним...