Описание Web разработки: Рассмотрим увеличение части картинки при наведении курсора мышки без скрипта 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>
Автор/Источник: http://shpargalkablog.ru
Cкриншоты:
|