Задать вопрос

Как наложить несколько прозрачных png-изображений, чтобы они показывались по отдельности при наведении курсора?

Задача такая.

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

Соответственно, есть две прориси – надпись 1 и надпись 2. Эти прориси наложены поверх друг друга и до поры не видны – отображается только фотография. Стрелка пересекает надпись 1, и на фотографии проявляется прорись 1. Задеваю вторую – прорись 2.

Идея такая. Наложить две прориси с прозрачным слоем друг на друга поверх фотографии с opacity 0. Когда происходит событие, одно из изображений получает opacity 100. Я хочу понять, как правильно наложить друг на друга изображения, чтобы задевался не весь прозрачный фон вообще, а только та часть, где есть пиксели, и как правильно прописать это событие.

Изображение помещено в таблицу (table).
  • Вопрос задан
  • 108 просмотров
Подписаться Простой 6 комментариев
Пригласить эксперта
Ответы на вопрос 2
firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.
@sewaca
В идеале бы посмотреть демку, а то не оч понятно почему надписи должны быть картинкой
В общем случае я бы просто юзал position: absolute на надписях и менял opacity при наведении. Не понимаю с чем возникла проблема
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы