Плавное увеличение изображения на чистом CSS3

css, html

Так уж получилось, что пишу статьи, поралельно верстая новый дизайн. думаю, это оптимальный вариант, так как есть возможность сразу разбираться с кодом, который там присутствует, чем потом искать все среди довольно большого файла.
И сегодня нашей целью будет увеличение изображений при наведении мыши, без использования jаvascript. Все будет делаться посредством CSS3.

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

<div class="image">
 <a href="#"><img src="images/im1.jpg" /></a>
</div>

Из кода мы видим, что у нас имеется контейнер с именем image, а в нем находится ссылка и изображение. Точнее, изображение, которое является ссылкой.
теперь давайте зададим параметры для блока image.

.image {
 overflow: hidden;
 width: 500px;
 height: 300px;
 }

Свойство overflow управляет отображением содержания блочного элемента, если оно выходит за область заданных размеров. В нашем случае, hidden говорит о том, что overflow скрыт. Если мы не поставим overflow, то при наведении изображение будет выходит за заданные рамки. Это может пригодиться в различных случаях, но не в нашем. Хотя, вполне не плохо будет смотреться в галереи.
Width и height - ширина и высота. Задаются в зависисмости от ваших нужд. Это размеры, в приделах которых будет увеличиваться изображение.
Давайте зададим стили для нашей анимации.

.image img {
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
 }

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

Свойство transition задает время, а так же направление трансформации. transition all говорит, что трансформация происходит со всеми сторонами. Так же может быть top (верх), bottom (низ) и т.д. 1s указывает на время трансформации. В нашем случае, это 1сек. Если хотите ускорить анимацию - уменьшите время. ease-out в свойстве transition означает, что анимация начинается быстро, и к концу замедляется.
Свойство transform позволяет трансформировать элемент. С помощью данного свойства вы можете его масштабировать, вращать, сдвигать, наклонять. Функция scale масштабирует элемент по горизонтали и вертикали. 1 - 100%. Меньше одного для уменьшения. Больше одного - увеличение.
Вот и весь урок, как сделать плавное увеличение изображения. Как видите, все достаточно наглядно и просто.

Уважаемые читатели! Если вы обнаружили в тексте ошибку, не поленитесь, выделите слово и нажмите CTRL+Enter. Сделаем язык чище!

  • +2
comments powered by Disqus

Ваше Имя:

Ваш E-Mail:

Или войтите с помощью социальных сетей

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
  • Введите два слова, показанных на картинке: