+7 (911) 913-40---
menu
person
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Обо всём » Собираем скрипты » Увеличение (Увеличение изображения и текста)
Увеличение
artnovДата: Вторник, 26.05.2015, 18:57 | Сообщение # 1
Начальник сайта
Группа: Администраторы
Сообщений: 151
Награды: 0
Репутация: 0
Статус: Offline
Увеличение материала по наведению курсора можно использовать поле с текстом.

 
Код
<style> .dsblockzoom{ position: relative; } .dsblockzoom img{ position: absolute; left: 0; } .dsblockzoom img.maximg{ opacity: 0; visibility: hidden; } .dsblockzoom img.minimg{ z-index: 1; } @-webkit-keyframes dszooma{ 0%{ z-index: -1; opacity: 0; } 50%{ opacity: 1; z-index: -1; left: 100%; box-shadow: none; } 51%{ z-index: 2; } 100%{ left: 0; box-shadow: 8px 8px 15px gray; } } @-moz-keyframes dszooma{ 0%{ z-index:-1; opacity:0; }50%{ opacity:1; z-index:-1; left:100%; box-shadow: none; }51%{ z-index:2; } 100%{ left:0; box-shadow: 8px 8px 15px gray; } } @-ms-keyframes dszooma{ 0%{ z-index:-1; opacity:0; } 50%{ opacity:1; z-index:-1; left:100%; box-shadow: none; } 51%{ z-index:2; } 100%{ left:0; box-shadow: 8px 8px 15px gray; } } .dsblockzoom:hover img.maximg{ -webkit-animation-name:dszooma; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -moz-animation-name:dszooma; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -ms-animation-name:dszooma; -ms-animation-duration: 1s; -ms-animation-iteration-count: 1; animation-name:dszooma; animation-duration: 1s; animation-iteration-count: 1; visibility:visible; opacity:1; box-shadow: 8px 8px 15px gray; z-index:2; } .dsblockzoom:hover img.minimg{ opacity:0.5; } </style> <div class="dsblockzoom" style="width:300px; height:171px"> <img class="minimg" src="http://www.novickiy.ru/_ph/10/2/449262736.jpg" alt="zoom effect" /> <img class="maximg" src="http://www.novickiy.ru/_ph/10/449262736.jpg" alt="zoom effect" /> </div>


Artnov
 
Форум » Обо всём » Собираем скрипты » Увеличение (Увеличение изображения и текста)
  • Страница 1 из 1
  • 1
Поиск: