Увеличение картинки при наведении

Увеличение картинки при наведении Увеличение изображения при наведении
Рассмотрим увеличение части картинки при наведении курсора мышки без скрипта jQuery, лишь на чистом CSS. А именно тот вариант, когда это происходит рядом с изображением. Адаптированно под резиновый дизайн. 
<style>
.izo-zoom {
  position: relative;
  overflow: hidden;
  height: 300px;
}

.izo-zoom img:nth-of-type(1) {
  z-index: 2;
  max-height: 100%;
  width: 200px;
  position: relative;
  box-shadow: -295px 0 0 300px #fff;
}

.izo-zoom span {
  border-bottom: 30px solid rgba(0, 0, 0, 0);
  z-index: 3;
  width: 100px;
  position: absolute; left: 0px; top: 0px;
  cursor: zoom-in;
}
.izo-zoom span:nth-child(even) {left: 100px;}
.izo-zoom span:nth-of-type(3), .izo-zoom span:nth-of-type(4) {top: 10%;}
.izo-zoom span:nth-of-type(5), .izo-zoom span:nth-of-type(6) {top: 20%;}
.izo-zoom span:nth-of-type(7), .izo-zoom span:nth-of-type(8) {top: 30%;}
.izo-zoom span:nth-of-type(9), .izo-zoom span:nth-of-type(10) {top: 40%;}
.izo-zoom span:nth-of-type(11), .izo-zoom span:nth-of-type(12) {top: 50%;}
.izo-zoom span:nth-of-type(13), .izo-zoom span:nth-of-type(14) {top: 60%;}
.izo-zoom span:nth-of-type(15), .izo-zoom span:nth-of-type(16) {top: 70%;}
.izo-zoom span:nth-of-type(17), .izo-zoom span:nth-of-type(18) {top: 80%;}
.izo-zoom span:nth-of-type(19), .izo-zoom span:nth-of-type(20) {top: 90%;}

.izo-zoom img:nth-of-type(2) {
  z-index: -1;
  height: 0px;
  width: 0px;
  position: absolute; left: 205px; top: 0;
  transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}
.izo-zoom span:hover ~ img:nth-of-type(2) {z-index: 1; height: auto; width: 100%;}
.izo-zoom span:nth-child(even):hover ~ img:nth-of-type(2) {left: 5px;} 
.izo-zoom span:nth-of-type(3):hover ~ img:nth-of-type(2), .izo-zoom span:nth-of-type(4):hover ~ img:nth-of-type(2) {top: -40%;} 
.izo-zoom span:nth-of-type(5):hover ~ img:nth-of-type(2), .izo-zoom span:nth-of-type(6):hover ~ img:nth-of-type(2) {top: -80%;} 
.izo-zoom span:nth-of-type(7):hover ~ img:nth-of-type(2), .izo-zoom span:nth-of-type(8):hover ~ img:nth-of-type(2) {top: -120%;} 
.izo-zoom span:nth-of-type(9):hover ~ img:nth-of-type(2), .izo-zoom span:nth-of-type(10):hover ~ img:nth-of-type(2) {top: -160%;} 
.izo-zoom span:nth-of-type(11):hover ~ img:nth-of-type(2), .izo-zoom span:nth-of-type(12):hover ~ img:nth-of-type(2) {top: -200%;} 
.izo-zoom span:nth-of-type(13):hover ~ img:nth-of-type(2), .izo-zoom span:nth-of-type(14):hover ~ img:nth-of-type(2) {top: -240%;} 
.izo-zoom span:nth-of-type(15):hover ~ img:nth-of-type(2), .izo-zoom span:nth-of-type(16):hover ~ img:nth-of-type(2) {top: -280%;} 
.izo-zoom span:nth-of-type(17):hover ~ img:nth-of-type(2), .izo-zoom span:nth-of-type(18):hover ~ img:nth-of-type(2) {top: -320%;} 
.izo-zoom span:nth-of-type(19):hover ~ img:nth-of-type(2), .izo-zoom span:nth-of-type(20):hover ~ img:nth-of-type(2) {top: -360%;} 

@media (max-width: 470px) {
  .izo-zoom img:nth-of-type(1) {width: 100%; box-shadow: none;}
  .izo-zoom span {display: none;}
  .izo-zoom {height: auto;}
}
</style>

<div class="izo-zoom">
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  <img src="URL-изо-миниатюра" />
  <img src="URL-изо" />
</div>

При наведении на картинку курсора она увеличиваетсяПри наведении на картинку она увеличивается
Или вариант, когда при наведении курсора мышки увеличение происходит в самой картинке. 
<style>
.izo-zoom1 {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.izo-zoom1 img:nth-of-type(1) {
  max-width: 350px; max-height: 350px;
  z-index: 2;
  position: relative;
}

.izo-zoom1 span {
  border-bottom: 36px solid rgba(0, 0, 0, 0);
  z-index: 3;
  width: 50%;
  position: absolute; left: 0px; top: 0px;
  cursor: zoom-in;
}
.izo-zoom1 span:nth-child(even) {left: 50%;}
.izo-zoom1 span:nth-of-type(3), .izo-zoom1 span:nth-of-type(4) {top: 10%;}
.izo-zoom1 span:nth-of-type(5), .izo-zoom1 span:nth-of-type(6) {top: 20%;}
.izo-zoom1 span:nth-of-type(7), .izo-zoom1 span:nth-of-type(8) {top: 30%;}
.izo-zoom1 span:nth-of-type(9), .izo-zoom1 span:nth-of-type(10) {top: 40%;}
.izo-zoom1 span:nth-of-type(11), .izo-zoom1 span:nth-of-type(12) {top: 50%;}
.izo-zoom1 span:nth-of-type(13), .izo-zoom1 span:nth-of-type(14) {top: 60%;}
.izo-zoom1 span:nth-of-type(15), .izo-zoom1 span:nth-of-type(16) {top: 70%;}
.izo-zoom1 span:nth-of-type(17), .izo-zoom1 span:nth-of-type(18) {top: 80%;}
.izo-zoom1 span:nth-of-type(19), .izo-zoom1 span:nth-of-type(20) {top: 90%;}

.izo-zoom1 img:nth-of-type(2) {
  width: 200%; max-width: 200%;
  position: absolute; top: 0;
  border-bottom: 200px solid #fff;
}
.izo-zoom1:hover img:nth-of-type(2) {
  z-index: 2;
  transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}

.izo-zoom1 span:nth-child(odd):hover ~ img:nth-of-type(2) {left: 0;} 
.izo-zoom1 span:nth-child(even):hover ~ img:nth-of-type(2) {left: -100%;}  
.izo-zoom1 span:nth-of-type(3):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(4):hover ~ img:nth-of-type(2) {top: -11%;} 
.izo-zoom1 span:nth-of-type(5):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(6):hover ~ img:nth-of-type(2) {top: -22%;} 
.izo-zoom1 span:nth-of-type(7):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(8):hover ~ img:nth-of-type(2) {top: -33%;} 
.izo-zoom1 span:nth-of-type(9):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(10):hover ~ img:nth-of-type(2) {top: -44%;} 
.izo-zoom1 span:nth-of-type(11):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(12):hover ~ img:nth-of-type(2) {top: -55%;} 
.izo-zoom1 span:nth-of-type(13):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(14):hover ~ img:nth-of-type(2) {top: -66%;} 
.izo-zoom1 span:nth-of-type(15):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(16):hover ~ img:nth-of-type(2) {top: -77%;} 
.izo-zoom1 span:nth-of-type(17):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(18):hover ~ img:nth-of-type(2) {top: -88%;} 
.izo-zoom1 span:nth-of-type(19):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(20):hover ~ img:nth-of-type(2) {top: -99%;}
</style>

<div class="izo-zoom1"><img src="URL-изо-миниатюра"/><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><img src="URL-изо"/></div>
в f t
наверх ↑

21 комментарий:

aldous
А что с медведями во втором примере? Они растянулись. Не люблю эти прыгающие картинки.
NMitra
Исправила. Очень даже неплохо получилось.

У самой морская болезнь начинается))) Но нужно признать, что такой способ увеличения изображений хорошо задерживает посетителя на странице.
aldous
Ну так - другое дело).
Космо Мизраил Горыныч
посмотрел "внутренности" кода, стало плохо @_@ ну а так прикольно)) решение реально нестандартное.
NMitra
Стилей не так много. Вот от span у меня никак не получилось отделаться. Думаю не за горами время с многочисленными :before и :after, тогда бы совсем красиво было.
NMitra
aldous, сними, плиз капчу. Что-то глючит.
Ефименко Владислав
Просто офигенно)))
Спасибо вам большое!)) Классный савйт))
Ефименко Владислав
ой,сайт)
NMitra
Благадарю))
Евгений
Спасибо за скрипт. Только вопрос, в IE не работает. Как можно исправить?
И еще, а если галерею картинок, как прописывать?
NMitra
Работает в IE, только плавности движения нет. Ответ: ждать поддержки свойства transition.

.izo-zoom1 {
float: left;
}
Анонимный
Спасибо!
Анонимный
Спасибо большое!
Ярослав
Вот это реально круто. Без всяких js <--люблю такие решения
+ к тому что в моб устройствах пашет
Спасибо!!!!
Админ
как понял это в каждую картинку нужно этот код дописывать чтоб он заработал
NMitra
Верно или JS, что не так уж и ужасно
Анонимный
спасибо,мне очень понравилось, збираю к себе на сайт:P
Анонимный
Меняю размеры первоначального изображения и начинает перескакивать увеличение, что делать?
NMitra
Скажите подробнее о том, что делаете
Анонимный
При наведении на фото курсора и передвижении по вертикали, есть возможность остановиться на любой точке и рассмотреть элемент фото, но при передвижении курсора по горизонтали, так не получается, фото занимает либо крайнюю левую или правую стороны. Можете подсказать,что нужно изменить в коде, чтобы по горизонтали можно было тоже рассмотреть любой элемент в том числе и центр фотографии.
NMitra
Готовый вариант: https://jsfiddle.net/NMitra/gy07ps5f/
Чем больше span, тем лучше детализация.