Проблема с с текстом над картинкой.

[ksn]

Ребята, такая вот проблема. Нужно что бы картинка ставновилась темней и появлялся текст, вот так:

 

Бюсь уже несколько дней. Помгите.

[Great Rash]

Покажите, что уже сделано.

[npofopr]

для размышлений наверно http://ruseller.com/lessons.php?rub=2&id=1706

[Switch74]

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

2. я так понимаю - требуется сделать данный эффект при наведении мыши и при клике должна открываться большая картинка?

[hitori]

http://codepen.io/anon/pen/vJyxm так чтоль? если не так, то http://api.jquery.com/category/events/mouse-events/ тут все события с мышкой. Подправишь что тебе надо

[Galaxy]

http://codepen.io/anon/pen/vJyxm так чтоль? если не так, то http://api.jquery.com/category/events/mouse-events/ тут все события с мышкой. Подправишь что тебе надо

такое тоже css'om можно, вот ваш пример только на css http://codepen.io/anon/pen/uGClj 

[hitori]

 

http://codepen.io/anon/pen/vJyxm так чтоль? если не так, то http://api.jquery.com/category/events/mouse-events/ тут все события с мышкой. Подправишь что тебе надо

такое тоже css'om можно, вот ваш пример только на css http://codepen.io/anon/pen/uGClj 

 

#imagecontainer:hover #yourtexttoshow я вот про это не знал.. тоже сначала начал делать в css, а потом понял, что не знаю как закончить. Да и к тому же ховер срабатывает, а когда мышь покидает див, то анимации нет

Edited September 16, 2014 by hitori

[Galaxy]

Отправлено Сегодня, 12:27 Galaxy, on 16 Sept 2014 - 2:24 PM, said:   hitori, on 16 Sept 2014 - 1:59 PM, said: http://codepen.io/anon/pen/vJyxm так чтоль? если не так, то http://api.jquery.com/category/events/mouse-events/ тут все события с мышкой. Подправишь что тебе надо такое тоже css'om можно, вот ваш пример только на css http://codepen.io/anon/pen/uGClj    #imagecontainer:hover #yourtexttoshow я вот про это не знал.. тоже сначала начал делать в css, а потом понял, что не знаю как закончить. Да и к тому же ховер срабатывает, а когда мышь покидает див, то анимации нет

 

http://codepen.io/anon/pen/uGClj  вы недооцениваете мощ css 

Edited September 16, 2014 by Galaxy

[hitori]

http://codepen.io/anon/pen/uGClj  вы недооцениваете мощ css

 

я ее не недооцениваю, а просто не знаю попытаюсь запомнить, что так тоже делать можно.

[ksn]

 

http://codepen.io/anon/pen/uGClj  вы недооцениваете мощ css

 

я ее не недооцениваю, а просто не знаю попытаюсь запомнить, что так тоже делать можно.

 

Весьма полезная вещица спасибо) так и нужно было) это и нужно было...

 

Последний вопрос, а что если у меня 6 картинок? background изображение в таком случае не подойдет.

[Galaxy]

ну тогда немного поменяется верстка (внутренний блок надо будет спозиционировать абсолютом) ,но суть такая же.

[ksn]

ну тогда немного поменяется верстка (внутренний блок надо будет спозиционировать абсолютом) ,но суть такая же.

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

#imagecontainer {  width: 401px;  height: 392px;  background: url(http://puu.sh/bBajS/71c9f3f0d7.jpg);  overflow: hidden;}

как мне это обойти? у меня 6 картинок и 6 блоков.

[Galaxy]

Схематично нарисуйте что вы хотите и покажите

[ksn]

 

Вот так, как-то

[Galaxy]

http://jsfiddle.net/5fzf9586/  на скорую руку так, а вообще в зависимости от того что нужно там будет просто разная вложенность блоков, принцип работы один и тот же.

[ksn]

Да, то что нужно было, спасибо.