Очень интересный CSS эффект – плавное увеличение изображения при наведении курсора. И задумался, а где у себя на блоге можно его использовать? Конечно же в рубриках записей, для увеличения картинок миниатюр записей. И сегодня я вам расскажу как я этого добился. Увеличить изображение миниатюры записи при наведении на него курсора мыши, мы будем без использования JQuery скриптов , которые нагружают сайт, а только при помощи CSS. Производить плавное увеличение, можно не только для миниатюры, но и для любых других изображений.
Редактируем файл стилей для плавного увеличения картинки миниатюры.
Итак, приступим. Открываем админ панельвнешний видредактор, и выбираем файл style.css: В этом файле, через сочетание клавиш Ctrl + F ищем строчку содержащую слово: thumbnail — что в переводе означает миниатюра. Если у вас, в файле стилей нет такого слова прочтите статью: “Как добавить миниатюру записи”. В моем примере атрибут 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 – рамку на увеличенное изображение.
Вот и все, обновляем файл и переходим в любую рубрику записей.