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

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

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 раза. Вы можете изменить на Ваш вкус.
Теперь к примеру работы!

Регистрирует новый размер картинки (миниатюры).

Регистрация означает, что WordPress, при загрузке изображения, кроме базовых размеров будет создавать еще один файл - измененную копию оригинала с указанными размерами.

Чтобы для поста можно было определить картинку миниатюру, нужно активировать эту возможность функцией - add_theme_support("post-thumbnails"); в файле шаблона funсtions.php.

При создании своей темы для каталога тем ВП, название нового размера должно содержать имя темы, . Например:

Add_image_size("mytheme-mini", 200, 200, true);

Хуков нет.

Возвращает

Ничего не возвращает.

Использование

Как создавать миниатюру?

false - масштабирование: картинка будет изменена в размере по подходящей стороне. Миниатюра создается по одной из подходящих сторон: указанной ширине или высоте. Итоговая картинка не будет точно совпадать указанными размерами.

true - кадрирование: миниатюра создается точно по указанным размерам. Подбирается наиболее подходящая сторона, картинка уменьшается по ней, а у противоположной стороны лишняя часть, не подходящая по пропорциям обрезается.

• array(координата_X, координата_Y) - указание позиции кадрирования, т.е. если указать массив (array("right", "top")), то изображение будет кадрированно с указанных позиций.

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

По умолчанию: false

Зарезервированные названия размеров

thumb, thumbnail, medium, large, post-thumbnail

Названия " thumb " и " thumbnail " - это алиасы (синонимы) и относятся к одинаковым файлам.

Также вы можете установить опции создаваемой миниатюры через:

Update_option("thumbnail_size_w", 160); update_option("thumbnail_size_h", 160); update_option("thumbnail_crop", 1);

Примеры

Добавим новые размеры миниатюр

Регистрируем новые размеры миниатюр, добавив такой код в файл шаблона functions.php:

If (function_exists("add_theme_support")) { add_theme_support("post-thumbnails"); set_post_thumbnail_size(150, 150); // размер миниатюры поста по умолчанию } if (function_exists("add_image_size")) { add_image_size("category-thumb", 300, 9999); // 300 в ширину и без ограничения в высоту add_image_size("homepage-thumb", 220, 180, true); // Кадрирование изображения }

Кадрирование (параметр $crop)

#1 - false (масштабирование)

Эта строка укажет WP, что при загрузке нового файла, нужно создать его уменьшенную копию. В этом случае миниатюра будет подогнана под ширину или высоту, смотря какая из сторон подходит больше, а противоположная сторона будет уменьшена пропорционально и скорее всего не будет больше указанного размера. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Картинка будет уменьшена до размеров - 250х180 px, т.е. высота будет 180, как мы и указали, однако ширина получится выше указанной 250 а не 220. В этом случае картинка не кадрируется и уменьшенная копия сохраняет пропорции полностью.

Add_image_size("homepage-thumb", 220, 180);

#2 - true (кадрирование)

Если установить четвертый параметр в true, то миниатюра будет уменьшена и обрезана точно под указанные размеры. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Оригинал будет уменьшен до высоты 180xp (тогда ширина его как бы равна 250px), а ширина будет обрезана по краям по 15px и в итоге получим уменьшенную копию: 220х180 пикселей:

Add_image_size("homepage-thumb", 220, 180, true);

#3 - уменьшение по нужной стороне

Чтобы уменьшить картинку по одной из нужных нам сторон, нужно указать противоположной стороне огромное значение. Например, у нас есть картинка 2500х1800, нам нужно получить миниатюру 500х1800, тогда указываем так:

Add_image_size("homepage-thumb", 500, 9999);

#4 - Array(x, y) (кадрирование с указанием позиций)

С версии 3.9 появилась возможность указывать позицию кадрирования. Давайте добавим размер миниатюры, которая будет размером 220х220 пикселей и будет фрагментом от оригинала, который будет взят с левого верхнего угла (left, top):

Add_image_size("custom-size", 220, 220, array("left", "top"));

Х_позиция может быть: " left " " center " или " right ".
Y_позиция может быть: " top ", " center " или " bottom ".

Использование новых размеров

Мы зарегистрировали 3, отличных от базовых, размера: post-thumbnails , category-thumb , homepage-thumb . Чтобы теперь использовать эти размеры (выводить картинки в шаблоне), можно использовать следующие функции:

Избранная картинка (featured image)

Чтобы использовать новый размер при выводе картинки установленной как "Избранная картинка" поста, в файле шаблона нужно использовать функцию the_post_thumbnail() :

If (has_post_thumbnail()) { the_post_thumbnail("category-thumb"); // category-thumb - название размера }

Новый размер в выбор размеров при вставке картинки (админ-панель)

Чтобы добавить новый размер в выбор размеров при вставке картинки в пост, нужно использовать фильтр-хук image_size_names_choose , в котором нужно добавить размер и указать для него понятное название:

Add_filter("image_size_names_choose", "my_custom_sizes"); function my_custom_sizes($sizes) { return array_merge($sizes, array("category-thumb" => "Мой размерчик",)); }

Для основных медиафайлов (PHP/Templates)

Также можно выводить картинки (по размерам) напрямую из библиотеки WordPress по ID картинки. Для этого используйте функцию wp_get_attachment_image() :

// Подразумевается, что у вас в библиотеке есть картинка с ID 42... echo wp_get_attachment_image(42, "category-thumb");

Если нам нужно получить только УРЛ картинки а не готовый тег , то используйте функцию wp_get_attachment_image_src() .

Плагины

Regenerate Thumbnails - этот плагин позволяет создать новые размеры для каждого загруженного изображения. Полезен когда вы изменили или добавили новые размеры миниатюр (через Настройки > Медиафайлы) во время когда в библиотеке уже есть загруженные изображения. Или когда вы изменили размеры "Избранного изображения" поста.

Force Regenerate Thumbnails - удаляет ранее созданные размеры и создает новые, на основе текущих установок.

AJAX thumbnail rebuild - позволяет пересоздать миниатюры. Полезен, если вы использовали функцию add_image_size() когда у вас уже есть загруженные изображения. (Это медленный плагин, но при этом в нем не бывает ошибок с недостатком выделенной памяти).

1. Simple Image Sizes - позволяет создавать новые размеры миниатюр прямо из панели "Медиафайлы". Он также умеет пересоздавать миниатюры. Он добавляет новые размеры в выбор для постов, так вы можете вставлять новые размеры в посты. Вы можете выбирать какие из размеров вы бы хотели пересоздать и для каких типов постов это нужно сделать.

Смысл увеличения фрагмента изображения

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

Смысл метода увеличения фрагмента изображения при наведении курсора мышки заключается в том, что размер детального изображения может превышать разрешение экрана пользователя, например разрешение экрана ноутбука, с которого просматривают сайт - 1280х800, а размер детального изображения - 1920х900. Ясное дело, что целиком на экране оно никак не уместится, поэтому для его увеличения классический метод с помощью выпадающего окна здесь не подходит. Нужно либо уменьшить картинку до размеров экрана пользователя, либо масштабировать ее (лучше так не делать), либо использовать хитрость и увеличивать лишь часть изображения. В таком случае сайт будет прекрасно смотреться как на больших, так и на маленьких мониторах, но при этом размер детальной картинки будет достаточно большим, чтобы пользователи смогли ее подробно изучить.

Преимущества и недостатки

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

• простота установки;
• гибкость настройки;
• минимальный размер JavaScript;
• простейшая HTML разметка;
• совместимость с jQuery любой версии;
• кроссбраузерность;
• подходит для разных разрешений экранов;
• лучше навороченных аналогов;
• бесплатный;
• подробное описание принципа работы и легко читаемый исходный код.

Как видите, преимуществ достаточно много и они очевидны. Да, несомненно, вы можете скачать аналогичные скрипты или стащить их с какого-нибудь крупного интернет-магазина. Данный метод, кстати говоря, называется Cloud Zoom , который, на самом деле, является платным и слишком наворочен. Сейчас подобные скрипты широко распространены и используются на многих сайтах, но вам придется потратить довольно много времени для того, чтобы разобраться и интегрировать аналогичный скрипт на свой сайт. Мы же в данной статье подробно опишем работу нашего скрипта, а если учесть, что его код состоит всего из нескольких строк, то вникнуть в суть дела вам удастся всего за несколько минут.

Если говорить о недостатках, то в голову приходит только один момент, да и называть его недостатком можно с натягом. Дело в том, что увеличенное изображение загружается в скрытом слое заранее, еще до того, как пользователь куда-либо нажал. Нам это просто необходимо потому, что когда курсор мышки окажется над картинкой, нужно чтобы увеличенный фрагмент появился моментально, а для этого приходится использовать предварительную загрузку. Но в этом ничего страшного нет, так как обычно на странице будет всего одно такое изображение, а его размер не так уж велик (200-300 Кб при разрешении 1800х1100 как в нашем примере), чтобы стоило переживать за интернет-трафик пользователя.

Разработка в деталях, от А до Я

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

HTML разметка

Как всегда, мы начинаем с HTML разметки страницы. Она до безобразия проста и содержит всего несколько строк кода:

Здесь все элементарно. Первый контейнер с классом preload , как видно из названия, отвечает за предварительную загрузку большого изображения. Зачем это нужно, мы уже обсудили чуть ранее. Внутрь этого контейнера вы помещаете то изображение, которое будет использоваться при увеличении. Некоторые моменты при этом важны и упускать их нельзя:

• постараться разместить этот контейнер как можно выше в DOM (в коде страницы) - чем выше, тем быстрее скрипт будет готов к работе;
• скрыть контейнер preload от глаз пользователей, выведя за обозримую область экрана (display: none при этом не подойдет).

Далее идет контейнер, содержащий превью. Мы присвоили ему класс zoomable , который, как не трудно догадаться, означает, что картинка может быть масштабирована. Изображение, которое в нем находится, отображается по умолчанию. Здесь тоже есть несколько ключевых моментов, которые не стоит упускать из виду:

• размер контейнера должен быть указан явно (ширина и высота, равные размерам превью);
• контейнер не должен содержать полос прокрутки, а все, что в нем не умещается, не должно отображаться (CSS свойство overflow);
• при наведении, можно опционально изменить курсор мышки на нестандартный или, как в примере, на один из подходящих стандартных (в виде прицела).

Важным моментом здесь является добавление произвольных атрибутов к маленькому изображению:

• data-preview-url (путь к маленькому изображению);
• data-img-url (путь к детальному изображению).

Эти атрибуты можно назвать как угодно, не в этом суть. Главное, чтобы они содержали в себе абсолютные или относительные ссылки на соответствующие изображения. Зачем дублировать путь к маленькому изображению, спросите вы, когда он и так указан в теге img . Не волнуйтесь, вы поймете это чуть позже.

CSS стили

CSS выглядит довольно просто и отвечает всем перечисленным ранее требованиям:

Preload { position: absolute; z-index: -1; top: -5000px; left: -5000px; } .zoomable { cursor: crosshair; width: 600px; height: 368px; overflow: hidden; margin: 0 auto; }

Предварительная загрузка детального изображения

Как мы уже упоминали ранее, предварительная загрузка большого изображения нам необходима для того, чтобы в момент наведения пользователем курсора мышки на изображение превьюшки, наш с вами скрипт был полностью готов к работе и не происходило никаких задержек. Вот две основных причины, почему предварительная загрузка детальной картинки в данном случае полностью оправдана:

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

JavaScript функция

Теперь все готово и мы переходим к самой интересной части - JavaScript, благодаря которому все это и будет работать.

Итак, приступим и сразу приведем рабочий скрипт целиком , чтобы его было удобно скопировать, а затем детально рассмотрим по частям:

$(window).load(function() { $(".zoomable").hover(function() { $(".zoomable img").stop().animate({opacity: 0}, 0, function() { $(".zoomable img").attr({src: $(".zoomable img").attr("data-img-url")}); }).animate({opacity: 1}, 300); }, function() { $(".zoomable img").stop().animate({opacity: 0}, 0, function() { $(".zoomable img").attr({src: $(".zoomable img").attr("data-preview-url")}).css({margin: "0 0"}); }).animate({opacity: 1}, 300); }); var c = $(".preload img").width() / $(".zoomable img").width(); $(".zoomable").mousemove(function(e) { var pX = e.pageX - $(this).offset().left; var pY = e.pageY - $(this).offset().top; var iX = pX * c - pX; var iY = pY * c - pY; $(".zoomable img").css({margin: "-" + iY + "px -" + iX + "px"}); }); });

Прежде всего, стоит обратить ваше внимание, что данная функция вызывается не после готовности DOM, а после полной загрузки страницы:

$(function() { console.log("DOM is ready"); }); $(window).load(function() { console.log("Page is ready"); });

Дело в том, что стандартный $(function() {}); здесь нам не подойдет, ведь если готова структура документа, это еще не значит, что загрузились все находящиеся в нем мультимедийные файлы. А так как нам очень важно получить размеры детального изображения еще до начала работы скрипта, то такое решение полностью оправдано.

Итак, прежде всего, мы обрабатываем событие наведения мышки на наше с вами изображение, используя стандартную функцию jQuery - hover() .

$(".zoomable").hover(function() { }, function() { });

В случае, если курсор мышки находится над контейнером zoomable , мы временно скрываем изображение, незаметно производим подмену его атрибута src (source), а затем плавно выводим на экран. При этом не будет неприятных скачков и все пройдет гладко.

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

Var c = $(".preload img").width() / $(".zoomable img").width();

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

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

Прежде всего, нам нужно отлавливать событие перемещения курсора мышки, а для облегчения работы скрипта, делать мы это будем не для всего документа, а только для контейнера zoomable . Ведь координаты мышки за пределами целевого слоя нас не интересуют.

$(".zoomable").mousemove(function(e) { });

Теперь нам нужно вычислить координаты курсора мышки относительно левого верхнего угла экрана. Но нас интересует расположение курсора относительно элемента, а не начала координат, поэтому необходимо сразу же отнять от этих координат расстояние левого верхнего угла контейнера zoomable от начала координат:

Var pX = e.pageX - $(this).offset().left; var pY = e.pageY - $(this).offset().top;

Все что нам остается, это вычислить и подставить значения отступов (margin-top и margin-left ) для детального изображения, чтобы знать, насколько его сдвигать для достижения эффекта увеличения фрагмента изображения. Поскольку слой zoomable у нас имеет фиксированные размеры, а все, что выходит за его пределы не отображается, то требуемый эффект будет получен при помощи отрицательных отступов:

Var iX = pX * c - pX; var iY = pY * c - pY; $(".zoomable img").css({margin: "-" + iY + "px -" + iX + "px"});

Пример работы скрипта

Для примера мы выбрали изображение, увеличение которого может заинтересовать многих. Ведь согласитесь, всем же интересно прочитать, что написано на этикетке бутылки шампанского 🙂

П.С. Комментарии к статье и распространение данного скрипта приветствуются.

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

Версия для печати

Добавление поддержки миниатюр в WordPress

Чтобы иметь возможность задавать изображения в качестве миниатюр для страниц WordPress, необходимо активировать поддержку миниатюр в шаблоне. Для этого добавьте следующий код в файл functions.php вашей темы оформления.

If (function_exists("add_theme_support")) {
add_theme_support("post-thumbnails");
}

После этого при создании страницы в правой колонке появится новый блок «Миниатюра записи».

Чтобы задать миниатюру для записи, достаточно нажать на ссылку и выбрать нужное изображение, после чего нажать «Задать миниатюру». При этом вы можете выбирать изображение как с общей библиотеки файлов, так и загрузить отдельно, используя стандартный загрузчик.

После добавления миниатюры, в соответствующем блоке отобразится выбранное вами изображение.

Если же блок добавления миниатюр не появился на странице добавления/редактирования записи, то зайдите в пункт «Настройки экрана» в правом верхнем углу рядом с кнопкой «Помощь» и отметьте чекбокс «Миниатюра записи».

Если и это не помогло – проверяйте корректность добавления функции активации миниатюр.

Функция вывода миниатюр в WordPress

Для вывода миниатюр в теме оформления WordPress используется специальная функция the_post_thumbnail(). Она используется внутри цикла WordPress и может принимать два параметра – размер миниатюры и массив атрибутов.

The_post_thumbnail($size, $attr);

• $size – название миниатюры (стандартные thumbnail, medium, large, full) или массив, содержащий ширину и высоту изображения, например, array(64, 64). Также в качестве значения можно передавать название миниатюр с произвольными размерами, созданными при помощи функции add_image_size().
• $attr – массив атрибутов. Например, чтобы задать класс для изображения достаточно прописать array(‘class’ => ‘thumb-class’). Поскольку другие параметры используются очень редко, то мы их рассматривать не будем. Более подробно обо всех значениях можно прочесть в кодексе WordPress.

Код вывода миниатюр разных размеров

The_post_thumbnail(); // Передается параметр -> "post-thumbnail"
the_post_thumbnail("thumbnail"); // Размер по умолчанию: 150px x 150px max
the_post_thumbnail("medium"); // Размер по умолчанию: 300px x 300px max
the_post_thumbnail("large"); // Размер по умолчанию: 640px x 640px max
the_post_thumbnail("full"); // оригинальный размер загруженного файла
the_post_thumbnail(array(100,100)); // Произвольный размер (100px x 100px)

Пример готового кода для вывода миниатюр в шаблоне WordPress

В качестве примера, давайте рассмотрим код вывод миниатюры-ссылки на большое изображение. Это особенно удобно, если на сайте используются всплывающие изображения. Поскольку отдельно расписывать код довольно неудобно, то напротив каждой строчки будет комментарий с объяснениями.

if (has_post_thumbnail()) { /* Проверка наличия прикрепленной к посту миниатюры */
$large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), "large"); /* Получаем ссылку на большое изображение */
echo ""; /* Формируем ссылку на большое изображение с использованием классов CSS и атрибута Title */
the_post_thumbnail("thumbnail", array("class" => "single-thumb")); /* Выводим миниатюру thumbnail с классом single-thumb */
echo ""; /* Добавляем закрывающий тег для ссылки */
} else { /* Если у поста нет миниатюры */ ?>
" title="" >
/images/noimage.jpg" width="180" height="180" alt="No image" />

Изменение размеров миниатюр

По умолчанию размеры стандартных миниатюр можно изменять непосредственно через административную панель сайта в разделе Настройки – Медиафайлы. К ним относятся миниатюры thumbnail, medium и large.

Кроме того, вы можете изменить/установить размер миниатюры поста, выводимой функцией the_post_thumbnail(), при помощи функции set_post_thumbnail_size(), которую необходимо добавить в файл functions.php:

Set_post_thumbnail_size($width, $height, $crop);

• $width – ширина миниатюры в пикс (по умолчанию. 0).
• $height – высота миниатюры в пикс. (по умолчанию 0).
• $crop – кадрирование или уменьшение изображения. true — будет взята часть изображения с указанными размерами, false – изображение будет уменьшено пропорционально, а все лишнее обрезано (по умолчанию: false).

Добавление миниатюр с произвольными размерами

Если стандартных миниатюр вам недостаточно, то при необходимости вы можете создать дополнительно любое количество миниатюр с произвольными размерами. Для этого используйте следующую функцию, которую необходимо будет добавить в файл functions.php вашей темы оформления WordPress.

Add_image_size($name, $width, $height, $crop);

• $name – название миниатюры.
• $width – ширина миниатюры в пикселях.
• $height – высота миниатюры в пикселях.
• $crop – кадрирование (true) или уменьшение (false) изображения (по умолчанию false).

Пример:

If (function_exists("add_image_size")) {
add_image_size("my-thumb", 180, 210); //180 в ширину и 210 в высоту
}

В этом случае при загрузке изображения WordPress будет дополнительно создавать еще один файл изображения с максимальным размером 180 пикс в ширину и 210 пикс в высоту. Подгонка всегда ведется по большей стороне. Например, если исходное изображение имело размер 500×1000 пикс., то миниатюра будет размером 105×210 пикс.

Использование произвольных миниатюр

Использование миниатюр произвольных размеров ничем не отличается от использования стандартных. Разница лишь в названии миниатюры.

The_post_thumbnail("my-thumb");

Вышеприведенный код выведет миниатюру my-thumb, созданную при помощи кода, приведенного чуть выше. Аналогичным образом выводятся миниатюры и с другими названиями.

На этом данная статья подошла к концу. Удачи вам и успехов в создании сайтов!

Сегодня хочу рассмотреть, как делать в css увеличение картинки. Это можно делать, например, при наведении на нее, а также само увеличение может происходить плавно или резко. И все это можно делать по-разному.

Простое резкое увеличение

Чтобы менять внешний вид картинки при наведении на нее, мы будем использовать псевдокласс hover. Способ заключается в том, чтобы просто изменять ширину картинки. При изменении ширины высота также автоматически изменяется. Например, ширина нашего виртуального изображения — 320 пикселей. Давайте немного увеличим:

Img:hover{ width: 380px; }

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

Плавное увеличение за счет трансформаций

Теперь мы рассмотрим абсолютно другой способ. Во-первых, изменение размеров будет происходить плавно. Во-вторых, вместо изменения ширины мы воспользуемся трансформациями — это нововведение css3.

Чтобы активировать плавный переход, нужно добавить самой картинке (не картинке по наведению) свойство transition . В нем нужно указать время, за которое должен быть произведен переход. Также можно добавить другие параметры, но на этом я не буду подробно останавливаться сегодня.

Img{ transition: 0.4s; }

Мы говорим браузеру, что изменения стилей для элементов с тегом img должны происходить не резко, а растягиваться по времени на 4 десятых секунды. Отлично, осталось сделать саму трансформацию при наведении на картинку:

Img:hover{ transform: scale(1.15, 1.15); }

Увеличение элементов делается с помощью свойства transform и его значения scale(увеличение по горизонтали, по вертикали) . Таким образом, если вы хотите пропорционально увеличить изображение, оба значения должны быть одинаковыми. Задавайте значения исходя из того, что 1 — это нормальный размер картинки.

Соответственно, в записи выше мы при наведении увеличиваем картинку на 15% с каждой стороны и это происходит плавно.

Таким образом, для изменения размеров вы можете использовать либо изменение ширины, либо трансформацию. У этих двух способов есть отличия. Если вы изменяете размеры с помощью width , то картинка увеличивается и двигает все содержимое, которое находится возле нее. В случае с трансформациями такого не происходит.

Изменение размера только по одной стороне

Если вам нужно в css увеличить картинку при наведении только по одной стороне, то это также проще всего сделать с помощью трансформаций. Просто напишите так:

Img:hover{ transform: scaleX(1.2); }

То есть после ключевого слова scale явно указываем координату — X или Y .