» »

Эффект увеличение изображения на CSS3

Эффект увеличение изображения на CSS3

Красивый эффект увеличение на чистом CSS3, где не будет файла JS. Что при наведение на картинку она автоматически увеличивается. А точнее вам не нужно делать клик, все будет происходить в рамке, где вы кликом водите изображение по разным сторонам. Возможно вы видели на вид материала или на других функциях. До этого был материал похожий, но там функция совершенно по другому работает, если здесь наводишь, то там в 2 клика выставляешь размер.Что вы смотрите по умолчанию картинку, но только клик попадает на ее, то она приобретает свою форму и размеры по умолчанию, но главное, как раз за эти рамки не вылезает.

Что можно поставить на фотоальбом или другие каталоги. Смотрится оригинально и довольно красиво и все это делается на CSS3, без всяких скриптов. Вот где применить, то решайте сами, здесь показан полный материал, а на деле, где можно видеть его, то у каждого свое видение. Чтоб понятно о чем речь идет, то вам будет предоставлена демонстрация, что безусловно кто то уже видел такой эффект по увеличению.

Так на светлом фоне будет, также рамка тоже редактируется.

Увеличение картинки без JS на чистом 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;  
  }

Чтоб понять как работает этот эффект, то демонстрация вам в этом поможет. Хочу заметить, что нет не одной ссылки, но разве только на изображение.
08.07.2017 Просмотров: 517 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 4
Kolinkor
Kolinkor 12.07.2017 01:591
0
Нужно было на DEMO больше по размеру изображение устанавливать и будет совершенно по другому смотреться.
Kosten
Kosten 12.07.2017 02:322
0
Возможно и больше, но нужно понимать, что у кого то будет по размеру не как шаблоны.
Kolinkor
Kolinkor 13.07.2017 04:533
0
Но есть фотоальбоме авы, что подобный процесс не так красиво может смотреться, а вот на обой, это то что нужно.
Kosten
Kosten 13.07.2017 07:014
0
Что по фотоальбому, но там разные могут по размеру изображение и как вид материалов, если не говорить о том,, когда идет изображение на всю ширину, вот на таком виде этот эффект встречал в интернете.
avatar