Создать увеличение картинки или изображение, где только задействуем CSS3, что безусловно будет без скриптов и различных библиотек. Вам только нужно знать, если вы ставите под галерею, то здесь должно быть изображение лучше по одному размеру или немного, чтоб отличалось. То при увеличении если будут разные размеры картинки, то покажется некоторые не корректны.
Ведь мы самостоятельно уставляем большой размер, но разве только поставить auto, чтоб автоматически преображались по умолчанию под свой размер. Ведь по здесь выстраиваем все вручную, где видеть небольшую картинку на 200 пикселей, что при клике идет увеличение, и также присутствуют оформление теней.
При открытии видим:
Здесь увеличение создан на 300 пикселей:
HTML
Код
<div class="dolushasa_akasuinka">
<img src="http://zornet.ru/_fr/56/1625717.jpg" alt="img" width="200px" height="200px" tabindex="0">
<img src="http://zornet.ru/_fr/56/4758203.jpg" alt="img" width="200px" height="200px" tabindex="0">
<img src="http://zornet.ru/_fr/56/7402530.jpg" alt="img" width="200px" height="200px" tabindex="0">
</div>
CSS
Код
.dolushasa_akasuinka {
position: absolute;
width: 615px;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
img[tabindex="0"] {
cursor: zoom-in;
}
img[tabindex="0"]:focus {
position: fixed;
z-index: 1;
width: 850px;
height: 835px;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
margin: auto;
box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(59,59,59,.4);
outline: 2px solid #fff;
}
img[tabindex="0"]:focus,
img[tabindex="0"]:focus ~ * {
pointer-events: none;
transition: width .3s, height .3s .1s;
}
Вероятно вы поняли как оно работает, ведь иногда нужно где то поставить увеличение, то этот способ отлично подойдет.
Демонстрация
