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

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

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

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

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

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

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

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

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

вот макет:

[ATTACH]181406[/ATTACH]

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

jpg 181406.jpg
SS
На сайте с 15.12.2015
Offline
67
#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
375
#3
Djalal002:
Такая задача:

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

Домены за 0.99$ https://8fn.ru/99cent | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
melkozaur
На сайте с 06.04.2010
Offline
496
#4

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

Серверы в NL/US со скидкой 30% нашим читателям: E5-2650v4/10GB DDR4/240GB SSD/1 Gbps - от $20: https://ua-hosting.company/vps/nl SEO без компромиссов: https://seoleaks.net SEOLEAKS - продвижение сайтов: https://www.instagram.com/seoleaks
D0
На сайте с 06.02.2019
Offline
1
#5

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

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