Красивый эффект, который состоит из HTML разметки и стилистики CSS, где можно подключить на любую картинку, где при наведении она будет уменьшиться. Само уменьшение происходит с помощью стилей и не каких скриптов здесь нет. Также веб мастер изначально сразу в стилистике задает разметку, по которой картинки будут по умолчанию установлены по размерам, возьмем только ширину и высоту, не говоря про добавленных элементам в дизайн.
Это сообщение об уменьшении эффекта наведения изображения с помощью CSS. Это очень по себе оригинальный, но распространенный эффект. И все мы знаем, что эффект зависания в основном используется для привлечения веб страницы. Это очень легко реализовать на вашем ресурсе. Сам эффект будет проходить в плавном уменьшение, но здесь также все в стилях прописано, что теперь на сайте или на блоге можно подключить, и тем сделать свою интернет площадку более оригинальной.
Проверено на работоспособность, где все отлично по эффектам работает:
HTML
Код
<div class="gtunilaskan lazedaqu-milstopsan">
<div>
<figure><img src="http://zornet.ru/ABVUN/sarunolas/zornet/7810977.jpg" /></figure>
<span>Марвел</span>
</div>
<div>
<figure><img src="http://zornet.ru/ABVUN/sarunolas/zornet/8320312.jpg" /></figure>
<span>Капитан</span>
</div>
<div>
<figure><img src="http://zornet.ru/ABVUN/sarunolas/zornet/6802803.jpg" /></figure>
<span>ZORNET.RU</span>
</div>
</div>
CSS
Код
.lazedaqu-milstopsan {
margin: 14px 14px 0;
padding: 0;
}
.lazedaqu-milstopsan:last-child {
padding-bottom: 59px;
}
.lazedaqu-milstopsan::after {
content: '';
clear: both;
display: block;
}
.lazedaqu-milstopsan div {
position: relative;
float: left;
width: 300px;
height: 195px;
margin: 0 0 0 24px;
padding: 0;
}
.lazedaqu-milstopsan div:first-child {
margin-left: 0;
}
.lazedaqu-milstopsan div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 297px;
margin: 0;
padding: 0;
color: #5f5b5b;
font-size: 17px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 298px;
height: 275px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
/* Zoom Out */
.gtunilaskan figure img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.gtunilaskan figure:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
Здесь в стилях есть возможность самостоятельно украмить картинку, это сделать красивый обвод или добавить тень, которая будет подчеркивать саму основу.
Демонстрация
