Увеличение картинки при наведении
Загрузка ...
Рассмотрим увеличение части картинки при наведении курсора мышки без скрипта 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>