.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;}
}
/*=========================================================================================================================*/
/* Код увеличителя начинается здесь */
/* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo">
Иначе увеличительне будет работать в IE6 */

.ienlarger {
    float: left;
    clear: none; /* Можно установить left или right по необходимости */
    padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */
    padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */
}
 
.ienlarger a {
    display:block;
    text-decoration: none;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки */
}
 
.ienlarger a:hover{ /* Не надо изменять тип позиционирования */
    position:relative;
}
 
.ienlarger span img {
    border: 1px solid #FFFFFF; /* Добавляем рамку вокруг изображения */
    margin-bottom: 8px; /* /Сдвигаем текст вниз от изображения */
}
 
.ienlarger a span {  /* Для большого изображения и названия */
    position: absolute;
    display:none;
    /*color: #FFCC00;  Текст названия */
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px; /* Размер шрифта названия */
    background-color: #ffffff;
    font-weight: bold;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 13px;
    padding-left: 10px;
}
 
.ienlarger img { /* Для IE, чтобы не было рамки вокруг ссылки */
border-width: 0;
}
 
.ienlarger a:hover span {
    display:block;
    top: 50px; /* Большое изображение выскакивает вверх на 50px от миниатюры */
    left: 90px; /* Большое изображение выскакивает влево на 90px от миниатюры */
    z-index: 100;
	     
/* Если добавить правило cursor:default;, то отключится курсор в виде руки на большом изображении */
}
 
.resize_thumb {
    width: 200px; /* Вводим нужный размер миниатюры здесь */
    height : auto;
	
}
 
/* Код увеличителя закончен */