Div overlay

[Seemann]

Приветствую!

Основные требования к реализации:

- высота блоков с картинками должна быть динамической

- ширина блока в %

- без использования таблиц

- при наведении на картинку выводится чёрный overlay

Проблему с выравниванием блоков, допустим, можно решить при помощи DivMasonry.

А вот вопрос состоит в следующем...

Можно ли решить задачу с overlay'ем не прибегая к использованию JS/jQuery?

[jumancy]

"задачу с overlay" - можете объяснить подробнее что имеете ввиду? что должно произойти при наведении на картинку?

[Seemann]

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

Вобщем-то, посредством jquery я добился такого эффекта, но теперь divMasonry не совсем правильно работает

Без DivMasonry

С ним

[Softlink]

А вот вопрос состоит в следующем...

Можно ли решить задачу с overlay'ем не прибегая к использованию JS/jQuery?

Можно

[Seemann]

Можно

Ммм...не совсем то. Оверлей должен как бы накладываться поверх на картинку (<img>). Может я чёт не совсем понял.

Edited November 16, 2011 by Seemann

[Softlink]

Можно

Ммм...не совсем то. Оверлей должен как бы накладываться поверх на картинку (<img>). Может я чёт не совсем понял.

http://jsfiddle.net/VD36p/3/

[Seemann]

Спасибо) Идеальный вариант в случае с фиксированной высотой оверлея)

Но необходима динамика в высоту:

Основные требования к реализации:

- высота блоков с картинками должна быть динамической

P.S. Я уже с JS вполне справился, поэтому уже чисто из интереса можно мучать)

P.P.S. Кроме того, нужен IE7-8

Edited November 16, 2011 by Seemann

[Softlink]

Спасибо) Идеальный вариант в случае с фиксированной высотой оверлея)

Но необходима динамика в высоту:

Основные требования к реализации:

- высота блоков с картинками должна быть динамической

Да ё-моё, а поэкспериментировать никак?

P.S. Я уже с JS вполне справился, поэтому уже чисто из интереса можно мучать)

P.P.S. Кроме того, нужен IE7-8

этого не было в условии. В таком случае только js помощник.

[Nekromancer]

http://jsfiddle.net/VD36p/6/ ну и чё, где проблема?

Для ие вставляете фильтр на прозрачность и всё.

[Seemann]

Softlink, Nekromancer,

Спасибо большое. Помогли избавиться от лишних скриптов.

Edited November 16, 2011 by Seemann