При наведении на картинку...

D0
На сайте с 06.02.2019
Offline
1
632

Всем доброго времени суток!

Такая задача: при наведении на блок с картинкой нужно чтобы

сверху наложились еще две png картинки есть 2 варианта

сделать с помощью z-index и с помощью background-image ,

подскажите какой вариант оптимальный и не время затратный

может у кого еще варианты есть вообщем кому не сложно помогите

буду искренне благодарен. Если пишу не в том разделе исправьте (простоНовичек) а так спасибо за понимание!

вот макет:

[ATTACH]181406[/ATTACH]

Слева картинка в обычном состоянии справа при наведении.

jpg 181406.jpg
SS
На сайте с 15.12.2015
Offline
83
#1

Можно еще попробовать через opacity

подскажите какой вариант оптимальный и не время затратный

Странный вопрос для такой задачи. По скорости на глаз не отличите.

Размещение естественных ссылок на тематических порталах, отзовиках, справочниках (/ru/forum/1013919)
Эгоист
На сайте с 12.09.2011
Offline
71
#2

.box{display:flex;align-items:center;justify-content:center;position:relative;}

.box .link,

.box .zoom{position;absolute;opacity:0;}

.box:hover .link,

.box:hover .zoom{opacity:1;transition:all .3s;}

totamon
На сайте с 12.05.2007
Offline
437
#3
Djalal002:
Такая задача:

вы верстку по форуму изучаете? не проще курс какой-то пройти, а потом всегда же можно посмотреть код уже готовых страниц

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
melkozaur
На сайте с 06.04.2010
Offline
536
#4

Я такое решение видел только на всяких шаблонах, по-моему вообще неюзабельная фишка, заставляющая пользователя напрягать голову, чего именно нажимать. По-моему это все красиво только в представлении хипстеров-дизайнеров.

D0
На сайте с 06.02.2019
Offline
1
#5

Всем спасибо кто уделил время ценю!

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