DataLife Engine > Версия для печати > Плавное увеличение картинки миниатюры записи при наведении курсора WordPress

Очень интересный CSS эффект – плавное увеличение изображения при наведении курсора. И задумался, а где у себя на блоге можно его использовать? Конечно же в рубриках записей, для увеличения картинок миниатюр записей. И сегодня я вам расскажу как я этого добился. Увеличить изображение миниатюры записи при наведении на него курсора мыши, мы будем без использования JQuery скриптов , которые нагружают сайт, а только при помощи CSS. Производить плавное увеличение, можно не только для миниатюры, но и для любых других изображений.

Редактируем файл стилей для плавного увеличения картинки миниатюры.

Итак, приступим. Открываем админ панельвнешний видредактор, и выбираем файл style.css: 1367652443_fayl-style1-6370431 В этом файле, через сочетание клавиш Ctrl + F ищем строчку содержащую слово: thumbnail — что в переводе означает миниатюра. Если у вас, в файле стилей нет такого слова прочтите статью: “Как добавить миниатюру записи”. 1367652461_fayl-style-miniatyury2-6311140 В моем примере атрибут img.attachment-thumbnail отвечает за изображение миниатюры, размер увеличиваемой картинки миниатюры 156px x 156px, у вас может быть по другому. Теперь, здесь нужно до закрывающей фигурной скобки прописать следующие стили плавного увеличения/уменьшения:

transition:width 2s ease-in-out .2s, height 2s ease-in-out .2s;

-webkit-transition:width 2s ease-in-out .2s, height 2s ease-in-out .2s;

-moz-transition:width 2s ease-in-out .2s, height 2s ease-in-out .2s;

-o-transition:width 2s ease-in-out .2s, height 2s ease-in-out .2s;

-ms-interpolation-mode: nearest-neighbor;

Значение 2s отвечает за скорость увеличения картинки при наведении курсора. Чтобы изображение увеличивалось нужно добавить размеры требуемого увеличенного изображения:

img.attachment-thumbnail:hover {
 width:520px;
 height:520px;
 border: 2px solid #29B0D9;
 position:relative;
 }

Здесь, мы задаем значение увеличенной картинки 520px x 520px – это в моем wordpress шаблоне, а вообще эти параметры для каждого индивидуальные, и под ваш шаблон могут быть другими. Устанавливаем border – рамку на увеличенное изображение. 1367652246_fayl-style-miniatyury3-8111121

Вот и все, обновляем файл и переходим в любую рубрику записей.