В статье узнаете, как сделать плавное увеличение изображение, которое находится в каркасе или блоке. Это очень полярный эффект и вероятно вы его на многих сайтах встречали, где наводите клик и картинка начинает внутри увеличиваться не вылезая за рамки каркаса. Это отличное решение для любой галерей или вид материала, вообщем там, где можно поставить картинку. Но главное, все это делается на чистом CSS, где не сложно все подключить.
Первым делом разметим блоки с изображениями внутри:
HTML
Код
<div class="lopesav-unakeb"><a href="#"><img width="237" height="237" src="http://zornet.ru/ABVUN/Abas/degakolas/img1.jpg" /></a></div>
<div class="lopesav-unakeb"><a href="#"><img width="237" height="237" src="http://zornet.ru/ABVUN/Abas/degakolas/img2.jpg" /></a></div>
CSS
Код
.lopesav-unakeb {
overflow:hidden;
width: 237px;
height:237px;
}
.lopesav-unakeb img {
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.lopesav-unakeb img:hover{
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
Что по времени, то поставил 0.8, где сами решите какое вам нужно. Свойство overflow:hidden отвечает за увеличение, что не будет выходить за скобки или каркас блока. Все сделано на одном классе lopesav-unakeb - который отвечает за все функций, что подключены в стилистике CSS.
Демонстрация