RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Мар
28

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

Всем привет. Недавно, бродив по сети я наткнулся на один очень интересный CSS эффект — плавное увеличение изображения при наведении курсора. И задумался, а где у себя на блоге можно его использовать? Конечно же в рубриках записей, для увеличения картинок миниатюр записей.  И сегодня я вам расскажу как я этого добился.

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

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

Итак, приступим. Открываем админ панель\внешний вид\редактор, и выбираем файл style.css:

файл style

В этом файле, через сочетание клавиш Ctrl + F ищем строчку содержащую слово: thumbnail — что в переводе означает миниатюра. Если у вас, в файле стилей нет такого слова прочтите статью: «Как добавить миниатюру записи».

файл style миниатюры

В моем примере атрибут 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 — рамку на увеличенное изображение.

файл style миниатюры3

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

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (5) на “Плавное увеличение картинки миниатюры записи при наведении курсора”

  • Регина (1 коммент.) 8 Октябрь 2014 в 9:20

    Здравствуйте! А как сделать чтобы картинка не растягивалась, а показывался увеличенный оригинал? То есть я ставлю такой код, а картинка при наведении растягивается и качество изображение ухудшается?

    • CMSONY
      CMSONY (172 коммент.) 8 Октябрь 2014 в 11:56

      У вас просто изображение имеет разное соотношение сторон (высота , ширина) поэтому и картинка при наведении растягивается по горизонтали больше чем по вертикали. Вам нужно отредактировать размеры требуемого увеличенного изображения. Для этого скачайте картинку на компьютер и откройте ее для редактирования к примеру pаint есть у всех. В программе нажмите «изменить размеры» далее введите необходимое значение по горизонтали, по вертикали высветится автоматом. Эти значения впишите в img.attachment-thumbnail:hover width: …. px;
      height: ….. px; Должно все получиться…

  • Александр (17 коммент.) 20 Октябрь 2015 в 20:50

    а как сделать так что бы при наведении на миниатюру показывалась в всплывающем окне сама запись? то есть есть на страничке 10 записей к примеру, размерами пускай 300х400px, а пользователь без нажатия на них а просто при наведении просматривает ее в размере скажем 500х700, размеры просто для примера, я уже пороги известных форумов оббивал, все никак не найду ответа

  • CMSONY
    CMSONY (172 коммент.) 21 Октябрь 2015 в 0:56

    Можно сделать запись картинкой с нужными размерами width,
    height. А при наведении на миниатюру использовать эффект css hover. Это как вариант.

  • Александр (17 коммент.) 21 Октябрь 2015 в 1:06

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

Оставить комментарий


вверх