» »

Плавное увеличение изображение на CSS3


Этот приём с трансформацией картинки наверняка всем знаком, при наведении на изображение она плавно увеличивается, довольно не плохо и красиво смотрится. Так как сейчас любое увеличение не в стандартном виде, можно смело говорить, что выполнено оригинально и это большой плюс интернет ресурсу в плане информационности.
Демо
Для начала нам нужно подготовить простую разметку для картинки
HTML
Код

<div class="image"><a href="#"><img width="567" height="241" src="images/screenshot.jpg" /></a></div>

или
Код

<div class="image"><img src="$IMG_URL1$" width="567" height="241" alt="$TITLE$"></a></div>


В стилях создаём обычный блок image, этот блок должен быть такого же размера как и изображение (в нашем случае 567 на 241).
И обязательно ставим правило overflow:hidden; Оно нужно для того, чтобы изображение не выходило за рамки блока при увеличении.

CSS
Код

.image {
  overflow:hidden;
  width: 567px;
  height:241px;
  }

.image img {
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  }
   
.image img:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  }


Вкратце:
ease-out - анимация начинается быстро, к концу замедляется, скорость 1 секунда
transform - трансформация элемента, в нашем случае масштабируем (увеличиваем), (1.1) размеры можно указать и больше
Источник: webref.ru/css
04.05.2016 Просмотров: 500 Комментарий: (14)

Поделиться в социальных сетях

Материал разместил

Комментарий: 14
Сопрано
Сопрано 04.05.2016 18:091
0
Ну если при наведение, но просто не могу представить на вид материале, хотя встречал такой сайт. Делают основном в фотографиях, или там в тематике такой, где их много, тогда можно наводить и смотреть. Но смотря как будет увеличиваться, быстро или медленно.
Angerfist
Angerfist 04.05.2016 18:142
0
Тут пример, где применить решать вам, а скорость и размеры увеличения в стилях регулируются же) Сам реализовал в информере, попробовал в фотоальбоме, но убрал так как посчитал лишним и так есть lightbox
Scheme
Scheme 04.05.2016 18:253
0
В информере можно поставить, чисто для него только, это нормально будет.
Сафрон
Сафрон 04.05.2016 18:474
0
Как то не приветствую, чтоб было разное увеличение на сайте, но здесь у кого какой вкус на такие функций.
Сафрон
Сафрон 04.05.2016 19:015
0
Извиняюсь, перед автором темы, думал совершенно о другом увеличение, пока не посмотрел DEMO, какое то время искал скрипт, на такой эффект, спасибо.
Tergran
Tergran 04.05.2016 19:216
0
А может кто то внятно объяснить, для чего на сайт ставить, но согласитесь, не чего самому сайту это не дает, просто один из хак.
Scheme
Scheme 04.05.2016 19:267
0
Tergran, думаю если у вас сайт на системе uCoz, то все по стандарту, что система предлагает. )
feliksteg
feliksteg 04.05.2016 23:518
0
Интересно смотрится, но бы не ставил, только если на фото и не более альбом должен как то оригинально и стильно смотреться. А вот на файлы не думаю что хорошо подойдёт, но здесь каждому видней.
Kosten
Kosten 05.05.2016 00:349
0
Точно могу сказать, что такой эффект на вид материала и комментариев к нему устанавливают.
Scheme
Scheme 05.05.2016 00:4310
0
Но а там то зачем, но можно понять, что если он как здесь сделан, или просто фишка на сайте.
tsakonter
tsakonter 05.05.2016 03:2811
0
Angerfist, спасибо за скрипт, у вас плохих нет, а всегда нужные.
Angerfist
Angerfist 07.05.2016 22:2412
0
я глянул что в начале выкладывал, стыдно)))
Angerfist
Angerfist 07.05.2016 22:2513
0
а это так, просто ищу идеи, гляжу если где на подобных сайтах про юкоз...
feliksteg
feliksteg 08.05.2016 19:4114
0
Извиняюсь, что то не чего не понял из высказано....
avatar