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

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

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

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

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

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

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

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

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

вот макет:

[ATTACH]181406[/ATTACH]

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

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

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

Хостинг от 90р ( https://goo.gl/h1VRkY ) и ВПС от 161р ( https://goo.gl/vw9JH7 ) 14 дней бесплатный тест! Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno а тут ВПС за 1,25$ https://8fn.ru/vps1doll Монетизация любых сайтов PUSHами ( https://8fn.ru/push ) - лучшая цена клика и показа ;)
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

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

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