Помощник
 |
Сообщение сайта
|
 Вывод изображения при наведения на часть картинки по area |
androv77
|
Сообщение
#1
|
||
|
0  Группа: User Сообщений: 1 Регистрация: 15.4.2016 Поблагодарили: 0 раз Репутация:  0 
 |
|
||
 |
|
||
|
YroKPROG
|
 16.7.2016, 17:32;
Ответить: YroKPROG
Сообщение
#2
|
|
0 Группа: User Сообщений: 1 Регистрация: 16.7.2016 Поблагодарили: 0 раз Репутация: 0
|
Я не гонюсь за выгодой.
HTML: <!doctype> <html> <meta charset='utf-8'> <link rel="stylesheet" href="style.css"> <body> <div id="tri-d-wrapper"> <figure id="img-wrapper"> <img src="1.jpg" alt="Preview Image"> <figcaption> <h2 class="title">Powered by YroKPROG</h2> <div class="bottom-detail"> <p>Пример Обьемного меню , или выпад от YroKPROG</p> <ul class="social-icons"> <li><a class="fa fa-facebook" href="#"></a></li> <li><a class="fa fa-dribbble" href="#"></a></li> <li><a class="fa fa-twitter" href="#"></a></li> <li><a class="fa fa-behance" href="#"></a></li> </ul> </div> </figcaption> </figure> </div> </body> </html> CSS: @import url(http://fonts.googleapis.com/css?family=Roboto:400,300); * { font-family: 'Roboto', sans-serif; } body { background: #3498db; } #tri-d-wrapper { -webkit-perspective: 300px; perspective: 300px; position: absolute; height: 100%; width: 100%; } #img-wrapper { width: 350px; background: #3498db; margin: 0; position: absolute; cursor: pointer; border-radius: 3px; overflow: hidden; top: 50%; left: 50%; margin-left: -175px; margin-top: -131px; -webkit-transform: rotateX(30deg) scale(.65); transform: rotateX(30deg) scale(.65); -webkit-transition: .3s all ease; transition: .3s all ease; box-shadow: 0 15px 20px 5px rgba(0,0,0,.2); } #img-wrapper:hover { -webkit-transform: rotateX(0deg) scale(1); transform: rotateX(0deg) scale(1); box-shadow: none; } #img-wrapper img { width: 100%; margin: 0; position: relative; display: block; -webkit-transition: .3s all ease; transition: .3s all ease; } #img-wrapper:hover img { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } #img-wrapper:hover figcaption { background: rgba(0,0,0,.75); } #img-wrapper:hover figcaption h2 { opacity: 1; padding-left: 20px; -webkit-transition: .3s all ease .3s; transition: .3s all ease .3s; } Должно работать так, если я конечно тебя понял:rolleyes: |
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ. Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п |
7 | stu999 | 1753 | 31.3.2024, 11:19 автор: stu999 |
 |
 Кто и зачем покупает картинки обезьян по $200 тысяч?NFT |
167 | metvekot | 27407 | 6.3.2024, 21:58 автор: Boymaster |
|
Ручной обмен, ввод/вывод электронных валют | ЮMoney, WMZ, Крипта, Приват, Монобанк | Низкие комиссии, минимальные суммы сделок быстро, удобно, по доступному курсу |
200 | Sostavitel | 98167 | 11.2.2024, 21:07 автор: Wolfhound |
|
Sbitcoin.ru – Ввод, Вывод, Обмен: Qiwi, YD, Btc, Btc-e, PM, Cash IN, PR24, MG, WU, Нал (RU, UA). | 9 | sbitcoinru | 6780 | 10.10.2023, 19:25 автор: Sbitcoin |
|
Обмен WebMoney - Яндекс - QIWI. Вывод/ввод Приват24 UAH | 225 | himin | 132809 | 7.5.2023, 13:26 автор: Вера_Симонова |
|
Текстовая версия | Сейчас: 18.4.2024, 11:33 |
