Увеличение изображение в 2 клика на CSS3
 | |
| Это простое увеличение изображение на сайте, которое будет происходить в два клика. При наведение и потом уже вторым идет клик. Здесь все сделано на чистых стилях, вам нужно изначально выставить размеры, которые изначально будут показывать форму. Это хорошо может подойти на комментарий, где для мобильных аппаратах картинка не будет вылазить за пределы. Когда вы просто наводите, то происходит небольшое увеличение, и здесь следует клик, и вот появляется картинка. Все будет работать на классе prostozoom, который как раз будет прикреплен к изображению. Также для понятие, как все происходит, в самих стилях CSS все очень подробно описание, что идет и как работает, что вы можете сформировать как вам нужно для своего интернет ресурса. Также можно где то поставить не считая комментариев, это личные сообщение, где вам перекидывают картинку и она по умолчанию приходит в небольшом размере, здесь вы ее просто сами разворачиваете. Стили вы ставите к примеру в CSS и потом вам нужно только прописать класс, это может и в самом материале, и все будет работать в два клика. Как и где прописывать, можно посмотреть ниже как пример. Переходим к установке: Здесь вот как раз код ссылкой и class поставлен. Код <img src="http://zornet.ru/Aben/Gsa/zartyn/gdesaun.jpg" class="prostozoom"> CSS: Код /* - Установка элемента - */ .prostozoom{ /* - Ширина начальная - */ width:170px; /* - Высота начальная - */ height:100px; } /* - Установка при наведении - */ .prostozoom:hover{ transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); } /* - Установка при нажатии - */ .prostozoom:active{ transform: scale(2.5, 2.5); -o-transform: scale(2.5, 2.5); -ms-transform: scale(2.5, 2.5); } Здесь видим, что написано сам установочный элемент, потом при самом наведение и нажатие, что сами можете регулировать, главное поставить его по размерам, чтоб по умолчанию был, все в пикселях идет. Но и не нужно забывать, если вы в стили не ставите, то можете просто прикрепить их к изображению. Код <style type="text/css"> CSS прописываем </style> PS - представлена демонстрация на материал, здесь не чего не настраивал, так как вам самим нужно, только посмотрел на работоспособность, что так же сами можете сделать. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 13 | |
| |
