Довольно частая практика на современных сайтах - плавное увеличение блока с изображением. Как же это сделать с помощью CSS?

Плавное увеличение изображения при наведении курсора CSS

Делим решение задачи на два этапа: разметка html и стили css. Для начала разметим блоки с изображениями внутри:

Всем блокам присвоили класс box. Одним из важных его свойств будет overflow:hidden, то есть скрыть всё, выходящее за рамки блока. Будем же увеличивать изображение? Да. Но видима будет только часть, ограниченная блоком.
Это мы разобрали. Переходим к описанию стилей.

Box {
overflow:hidden;
width: 250px;
height:250px;
}
Всё как и оговаривали - квадратные блоки, схожие по размеру со стандартным, не увеличенным изображением, то тоже 250 на 250.
Свойство overflow:hidden как и говорилось ранее, не позволить выходить за рамки блока при увеличении.
Свойства касающиеся изображений:

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

Box img:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
Тут без CSS3 никуда. Все современные браузеры анимацию отобразят. Нужны параметры transition и transform. Время на анимацию выставляем 1 секунду (1s). Увеличение будет происходить в 1.2 раза. Вы можете изменить на Ваш вкус.
Теперь к примеру работы!

Сейчас назрела потребность в красивом увеличении картинок по наведению. И никаких JS! Но пользователи старых браузеров ничего не увидят. Так им и надо.

В интернете ничего законченного не нашел, или используется position: absolute, или контент разъезжается, уступая место картинке, что не всегда приемлемо.

Итак, приступим. Все, что надо указать - задать класс картинке. Задавать будем, как всегда, отдельно для левых, отдельно для правых, и отдельно для центра. Это связано с особенностью увеличения картинки. Ведь, если картинка слева, при увеличении она должна сдвигаться вправо, иначе на мелких мониторах картинка уплывет за пределы браузера.

код HTML для картинки, выведенной слева (картинка увеличивается, подведите мышку к картинке):

И немного CSS, где указываем размер миниатюры, место расположения (слева), обтекание, а так же увеличение картинки при наведении:

img .img.left { float: left ; margin: 5px 15px 5px 0 ; max-height: 320px ; max-width: 320px ; } img .img.left :hover{ transform: scale (2 ) translate (70px , 30px ); transition: all 0 . 3s linear 0 . 3s ; }

Почти то же самое для картинок справа

И CSS отличается только расположением миниатюры (справа) и сдвигом влево при увеличении:

img .img.right { float: right ; margin: 5px 0 5px 15px ; max-height: 320px ; max-width: 320px ; } img .img.right :hover{ transform: scale (2 ) translate (-69px , 30px ); transition: all 0 . 3s linear 0 . 3s ; }

А теперь выведем миниатюру для центра:

img .img.center { margin: 5px auto ; display: block ; max-height: 320px ; max-width: 320px ; } img .img.center :hover { transform: scale (2 ); transition: all 0 . 3s linear 0 . 3s ; }

Обобщаем CSS и добавляем красоты:

img .img.left { float: left ; margin: 5px 15px 5px 0 ; } img .img.right { float: right ; margin: 5px 0 5px 15px ; } img .img.center { margin: 5px auto ; display: block ; } img .img { max-height: 320px ; max-width: 320px ; transition: all 0 . 3s linear 0s ; z-index: 1 ; border: 1px solid #EEE ; background: #FFFFFF ; padding: 5px ; } img .img :hover { cursor: pointer ; box-shadow: 0 0 5px 5px #eee ; border: 1px solid #25A0E3 ; z-index: 10 ; transition: all 0 . 3s linear 0 . 3s ; } img .img.left :hover{ transform: scale (2 ) translate (88px , 30px ); } img .img.right :hover{ transform: scale (2 ) translate (-88px , 30px ); } img .img.center :hover { transform: scale (2 ); }

Сделал задержку увеличения картинки на 0.3с. Что бы при перемещении мышки через картинку, она не увеличивалась.

Для того чтобы организовать такое увеличение, я предлагаю два способа. Оба на чистом CSS , без использования JavaScript . Первый способ увеличивает блок или картинку, в зависимости к чему Вы собираетесь применить данный метод, без влияния на остальные элементы страницы. Он как бы увеличивается поверх остальных. Для того чтобы организовать такое плавное увеличение, нужно:
1. Определится какой элемент будет. В нашем случаи это будет блок с классом block

2. Выводим его в нужном месте html кода нашего сайта

В файле стилей присваиваем ему следующие параметры:

Block{ width:150px; height:150px; background:#f30; display: block; opacity: 1; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; } .block:hover { -webkit-transform: scale(1.2,1.2); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1.2,1.2); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; }

Можно проверять готовый результат. Ширину, Высоту, фон и другие параметры задаем какие угодно, главное указать правильно параметры -transform - отвечающий за размер увеличения, причем просто в блоке его трогать не надо, он по умолчанию 1 - исходный размер, а вот при свойстве :hover мы его меняем на нужное, до какого размера будет увеличение, в данном случаи 1.2.
Конечно же Вы можете изменить наоборот, допустим если Вам нужно плавное уменьшение при наведении, тут никто не запретит Вам этого сделать.
Следующее свойство - это -transition , отвечающее за скорость анимации в миллисекундах. Если его не использовать, все будет резко увеличиваться и уменьшаться. В данном примере значение этого параметра - 550ms .

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

1. Как и в первом примере определяем блок с классом уже block2

2. Опять же выводим в нужном месте

И присваиваем ему стили:

Block2{ width: 150px; height: 150px; background:#390; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .block2:hover { width: 200px; height: 200px; }

В данном случаи, мы просто изменяем размер блока в пикселях и добавляем свойство -transition , которое делает плавным увеличение. В отличии от первого способа, мы указываем время анимации не в миллисекундах, а в секундах. На примере - это 2 секунды. Вот такими не хитрыми способами можно сделать плавное увеличение не прибегая к использованию скриптов. Можно обойтись чистым СSS.

Старые версии браузеров, могут не понять что от них хотят, поэтому смотрите сами. Лично я не обращаю внимания и не забиваю голову плохим с тем, что возможно, 1 из миллиона зайдет на мой сайт с древнего убогого Internet Explorer и у него что-то не отобразится. Для таких пользователей я вывожу сообщение, что им пора отказаться от мусора и перейти на нормальный, человеческий браузер.

На этом все, спасибо за внимание. 🙂

Этот приём с картинками я использую у себя на блоге. Когда пользователь наводит на миниатюру любой записи она плавно увеличивается. Согласитесь, довольно не плохо и красиво смотрится.

И делается это только с помощью CSS3, и довольно таки просто. Сейчас я Вам расскажу как это делать.

Как это работает Вы можете посмотреть в демо и у меня на блоге на главной странице.

Плавное увеличение картинки при наведении только на CSS3.

Html

Для начала нам нужно подготовить не сложную разметку html для наших картинок, в данном случае у нас их будет 3.

Как видите, что все картинки имеют класс image к которому мы, собственно, и будем задавать параметры.

CSS

А вот как выглядят стили:

Image { overflow:hidden; width: 380px; height:250px; }

Мы создали обычный блок размером 380 на 250 пикселей. Это блок должен быть такого же размера как и изображение (в нашем случае 380 на 250). Соответственно, если у Вас картинка будет большего или меньшего размера, размер блока.image делаем такого же размера как и картинка.

И обязательно ставим правило overflow:hidden; Оно нужно для того, чтобы наше изображение не выходило за рамки блока при увеличении.

Теперь задаём правила для самих изображений:

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); }

Анимация происходит с помощью параметра в CSS3. На всю анимацию у нас уходит одна секунда. Если Вы хотите, чтобы картинка быстрее увеличивалась, уменьшите это значение.

В демо картинка увеличивается 1.1 раза. Если поставить значение 2, то картинка увеличится в два раза и так далее.

Вот и всё, друзья. Как и обещал, что урок будет очень простым. Надеюсь Вам понравился этот простой эффект для картинок. До скорых встреч.

Здравствуйте, дорогие читатели. Думала, я думала и решила написать статью как красиво увеличить фотографии при наведении на нее курсором мышки.

Радости моей не было предела, и не потому что интересная фишка, и не потому что детство в одном месте играет:) Хочу сказать, что такого эффекта я не ожидала.

Блогер я новенький, молодой, начинающий. Офисными программами пользоваться практически не умела, не говоря уже о фотошопе. Блог создала, а оказалось что учиться нужно было с самых низов. Чайник чайником. Все что я умела это сделать скриншот в программе Paint.

Смею заметить, что смотреть на мои скриншоты без слез было нельзя. Но неожиданно, когда экспериментировала и добавила гаджет в блог, мои фотографии заиграли, засияли, засверкали ярким цветом, они словно ожили и начали другую новую жизнь, в них добавилось контрастность.

Эффект плавного увеличения картинок будет у всех изображений в блоге. Картинки не увеличиваются на весь экран, а плавно выдвигаются и оживают. Настоящий 3Д эффект.

Как установить гаджет «Плавное увеличение картинки при наведении курсора» в Blogger

Плавное увеличение картинки при наведении курсора мыши

Код устанавливается как обычный гаджет HTML/ JavaScript в любом месте. Статью « » можно почитать в моем блоге.