Как сделать поверх картинки, текст с затемнением этой картинки?

Question

[smoklew]

Есть 6 картинок ( вообщем , там значки марок автомобилей) , нужно чтобы при наведении на одну из них, на месте картинки , появлялось название марки с затемненым фоном, кто может помочь решить это через JS или же если возможно то через CSS.

jsfiddle.net/ek2wf11y

Answer 1

[Роман]

Помещаете текст в псевдоэлемент к картинке. Делаете ему опасити 0 и цвет фона rgba(0, 0, 0, 0.5) (разумеется позиционируете правильно) Картинке ставьте transition по опасити. При ховере на картинку меняйте опасити у псевдоэлемнета.

Comments

[smoklew]

как поместить текст в псевдоэлемент, и стоит ли картинку делать фоновой ? можно какой нибудь материал на эту тему)?

[Роман]

smoklew: в css - content: "ваш текст"
Можно наоборот. Текст тегом, картинку бэгграундом. А можно так как вам teotlu говорит.

[teotlu]

Роман: текст в псевдоэлемент в данном случае — не вариант, потому что текст является подписью к картинке. Как вы будете content псевдоэлемента указывать извне, не в css?)

[Роман]

teotlu:
можно поступить таким образом:

img:hover::after { 
 content: attr(data-title); 
}

при этом тегу img добавить data-title="Ваша подпись"

[teotlu]

Роман: действительно, можно, что-то я не подумал об этом. Однако, скажем, при продвижении сайта аналитики всё равно попросят вынести тайтлы из атрибутов в теги, но это уже частный случай.

[Роман]

teotlu: в общем, как всегда с версткой - существует тысяча и один способ решения задачи :)

[teotlu]

Роман: есть такое) главное знать, в каком случае какой способ будет наиболее правильным.

Answer 2

[teotlu]

Вот, но с форматированием кода и знаниями html у вас просто ужас какой-то. Нельзя элементы оборачивать в ссылки, ссылки должны быть внутри. И jsfiddle сам добавляет табуляцию, за вас, чтобы смотрелось лучше и код можно было нормально читать — а вы её убиваете зачем-то. Слов нет.

Answer 3

[Max]

Можете попробовать использовать такое решение. Просто удалите ненужные бутстраповские стили
jsfiddle.net/r1qwguar/1