Hover-эффекты в шаблоне Classipress

Модернизация DMaster

Для тех, кто не совсем в курсе или совсем не в курсе того, что это такое и зачем нужно, коротко поясню – hover-эффекты это различные виды визуальных эффектов (вращение, трансформация, смещение, увеличение, плавные переходы и т.п.) проявляющиеся при наведении курсора мыши на элементы сайта. Использование таких эффектов в разумных пределах придаст любому веб-сайту динамичный и живой вид.
Обычно для реализации hover-эффектов применяется JavaScript, но с появлением CSS3 появилась возможность создавать их только с помощью средства стилей.

Сегодня я хочу показать парочку примеров того, как можно применить hover-эффекты на чистом CSS3 к миниатюрам изображений на доске объявлений с шаблоном Classipress.

Итак, приступим. Изменения вносим только в файл style.css (не забывайте перед этим сделать его копию).

Эффект вращения стандартных миниатюр в анонсах объявлений

Найдите строки кода:

и замените этими:

Сохраните изменения и обновите страницу в браузере. Теперь при наведении курсора мыши на миниатюру, миниатюра будет вращаться.

Эффект вращения с трансформацией круглых миниатюр в анонсах объявлений

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

Строки кода:

Замените на:

Сохраните изменения в style.css и обязательно обновите страницу в браузере. Теперь миниатюры в анонсах объявлений должны стать круглыми, а при наведении курсора мыши вращаться и одновременно принимать форму квадрата.

Таким же образом можно применить hover-эффекты к миниатюрам в слайдере VIP объявлений.

Посмотреть на все это в динамике, как всегда можно на демо-сайте.

D.Master

DMaster

Создание досок объявлений на шаблоне Classipress для Wordpress "под ключ". Помощь в установке на хостинг, настройке, локализации, модернизации шаблона, а также мелкие правки и корректировки под ваши нужды.

E-mail

10 комментариев

  1. Добрый день. Сколько ни бился на версии 3.5.1 — так и не удалось повторить. Опишите, пожалуйста, для данной версии код.

    • DMaster

      Вы в каком файле делаете изменения? Дело в том, что в версии 3.5.1 рабочим является style.min.css, а не style.css

      • Доброго времени суток! Через header.php подключил style.css В данном файле много настроек, также имеются указанные строки кода, но не полностью аналогичные. Их и изменил-эффект есть, но не тот что ожидал. Пока не добился плавной анимации. А вот style.min.css какой то пустой 🙁

  2. Тяжёлый файл style.min.css в 3.5.1 и немного не такой скрипт (код) идёт там. Нет случайно готового с круглым эффектом файла style.min.css?

    • DMaster

      Готового, к сожалению нет. Если ваш шаблон зачитывает style.min.css, то попробуйте переименовать файл style.css в style.min.css, с ним работать гораздо удобнее. Не забудьте только сохранить оригинальный style.min.css, чтоб потом не было мучительно больно ))

      • Опасная игра. Они что одинаковые, просто построены по разному? Один с порядком, второй всё в строчку?

        • DMaster

          В style.min.css удалены все комментарии, пробелы и переносы. Поэтому все в одну строку и слеплено. За счет меньшего размера файла, загрузка кода теоретически должна чуточку ускориться.
          Опасности никакой, вернете оригинальный файл на свое место да и все. Главное копию сделать, чтоб было что возвращать.

  3. Не получается на 3.5.1
    Подсоединил файл style.css, изменил скрипт и фото становятся в несколько раз больше чем были.

    • у меня получилось,только не крутятся почему то….вставил такой код-
      .content_res img.attachment-ad-medium,.content_res img.attachment-ad-thumb,.content_res img.attachment-ad-small { border:1px solid #ccc;padding:5px;background-color:#fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-radius: 50%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
      .content_res img.attachment-medium,.content_res img.attachment-thumbnail{background-color:#fff;-webkit-border-radius:4px;border-radius:4px}.content_res img.attachment-ad-thumb{max-width:75px}.content_res img.attachment-ad-small:hover { border-radius: 0%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}.content_res img.attachment-ad-medium{max-width:85px;height:auto}.content_res .noresults{padding:20px}
      в файле style.min.css

Добавить комментарий

  Отправляя комментарий я принимаю Политику кофиденциальности сайта *