Дизайн та розробка сайту

Увеличение изображения, блока при наведении

Увеличение обьекта

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





Увеличение обьекта

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

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

<div class="block"></div>

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

.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. Опять же выводим в нужном месте

<div class="block2"></div>

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

.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 и у него что-то не отобразится. Для таких пользователей я вывожу сообщение, что им пора отказаться от мусора и перейти на нормальный, человеческий браузер.

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

Дизайн та розробка сайту

Back to top