Эффект увеличение изображения на CSS3
 | |
| Красивый эффект увеличение на чистом CSS3, где не будет файла JS. Что при наведение на картинку она автоматически увеличивается. А точнее вам не нужно делать клик, все будет происходить в рамке, где вы кликом водите изображение по разным сторонам. Возможно вы видели на вид материала или на других функциях. До этого был материал похожий, но там функция совершенно по другому работает, если здесь наводишь, то там в 2 клика выставляешь размер.Что вы смотрите по умолчанию картинку, но только клик попадает на ее, то она приобретает свою форму и размеры по умолчанию, но главное, как раз за эти рамки не вылезает. Что можно поставить на фотоальбом или другие каталоги. Смотрится оригинально и довольно красиво и все это делается на CSS3, без всяких скриптов. Вот где применить, то решайте сами, здесь показан полный материал, а на деле, где можно видеть его, то у каждого свое видение. Чтоб понятно о чем речь идет, то вам будет предоставлена демонстрация, что безусловно кто то уже видел такой эффект по увеличению. Так на светлом фоне будет, также рамка тоже редактируется.  HTML Код <div class="container"> <div class="zoom"> <div class="zoom__top zoom__left"></div> <div class="zoom__top zoom__centre"></div> <div class="zoom__top zoom__right"></div> <div class="zoom__middle zoom__left"></div> <div class="zoom__middle zoom__centre"></div> <div class="zoom__middle zoom__right"></div> <div class="zoom__bottom zoom__left"></div> <div class="zoom__bottom zoom__centre"></div> <div class="zoom__bottom zoom__right"></div> <img class="zoom__image" src="http://zornet.ru/zorner_ru_1/Abter/der/BftxWVWSQ.png" alt=""> </div> </div> CSS: Код .zoom { border: 3px solid #ccc; overflow: hidden; position: relative; display: inline-block; width: 300px; height: 280px; } .zoom > div { height: 33.33%; width: 33.333%; z-index: 1; float: left; display: inline-block; position: relative; } .zoom__top.zoom__left:hover ~ .zoom__image { -webkit-transform: translate(20%, 20%) scale(1.5); transform: translate(20%, 20%) scale(1.5); } .zoom__top.zoom__centre:hover ~ .zoom__image { -webkit-transform: translate(0%, 20%) scale(1.5); transform: translate(0%, 20%) scale(1.5); } .zoom__top.zoom__right:hover ~ .zoom__image { -webkit-transform: translate(-20%, 20%) scale(1.5); transform: translate(-20%, 20%) scale(1.5); } .zoom__middle.zoom__left:hover ~ .zoom__image { -webkit-transform: translate(20%, 0) scale(1.5); transform: translate(20%, 0) scale(1.5); } .zoom__middle.zoom__centre:hover ~ .zoom__image { -webkit-transform: translate(0, 0) scale(1.5); transform: translate(0, 0) scale(1.5); } .zoom__middle.zoom__right:hover ~ .zoom__image { -webkit-transform: translate(-20%, 0) scale(1.5); transform: translate(-20%, 0) scale(1.5); } .zoom__bottom.zoom__left:hover ~ .zoom__image { -webkit-transform: translate(20%, -20%) scale(1.5); transform: translate(20%, -20%) scale(1.5); } .zoom__bottom.zoom__centre:hover ~ .zoom__image { -webkit-transform: translate(0, -20%) scale(1.5); transform: translate(0, -20%) scale(1.5); } .zoom__bottom.zoom__right:hover ~ .zoom__image { -webkit-transform: translate(-20%, -20%) scale(1.5); transform: translate(-20%, -20%) scale(1.5); } .zoom__image { -webkit-transition: all 1.5s ease; transition: all 1.5s ease; display: block; max-width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .container { width: 100%; text-align: center; } Чтоб понять как работает этот эффект, то демонстрация вам в этом поможет. Хочу заметить, что нет не одной ссылки, но разве только на изображение. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
