• Страница 1 из 1
  • 1
Увеличение изображения при наведение в CSS
Kosten
Понедельник, 04 Февраля 2019, 19:36 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
В статье узнаете, как сделать плавное увеличение изображение, которое находится в каркасе или блоке. Это очень полярный эффект и вероятно вы его на многих сайтах встречали, где наводите клик и картинка начинает внутри увеличиваться не вылезая за рамки каркаса. Это отличное решение для любой галерей или вид материала, вообщем там, где можно поставить картинку. Но главное, все это делается на чистом 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.

Демонстрация
Прикрепления: 7865281.png (48.0 Kb) · zahds.zip (1.5 Kb)
Страна: (RU)
Kosten
Вторник, 05 Февраля 2019, 02:51 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Еще одно аналогичное плавное увеличение изображения, где присутствует анимация, которая работает при помощи параметра transition и transform в CSS3. И для того, чтоб подключить больше или меньше скорость увлечение, то задействуем этот параметр.



HTML

Код
<div class="ketsaceb-kopasdun"><a href="#"><img width="365" height="235" src="Ссылка на изображение" /></a></div>


CSS

Код
.ketsaceb-kopasdun {
overflow:hidden;
width: 365px;
height:235px;
}
.ketsaceb-kopasdun img {
-moz-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
}

.ketsaceb-kopasdun img:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}


Демонстрация
Прикрепления: 2334224.jpg (63.5 Kb)
Страна: (RU)
Kosten
Четверг, 07 Февраля 2019, 02:54 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Если кому нужно, чтоб по клику увеличивать изображение, и чтоб темная рамка по всем сторонам шла, то вот этот вариант подойдет, что ранее на вид материалов устанавливал.
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: