CSS3 эффект при наведении на изображение + 5 примеров! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSCSS3 эффект при наведении на изображение + 5 примеров!
Дата: 04.07.2013 в 20:38 | Просмотров: 12405

CSS3 эффект при наведении на изображение + 5 примеров!

эффект при наведении, эффект при наведении на изображение, css3 эффекты
Скачатьбесплатно с сервера
Демодемонстрация

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

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

Пожалуйста, обратите внимание, что это будет корректно работать только в современных браузерах, которые поддерживают современные свойства CSS3.

HTML разметки

Мы имеем простую конструкцию кода, в виде родительского класса view, и содержимого внутри него. Создадим класс mask, к которому будут применены CSS3 переходы, чтобы получить эффект при наведении.

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

Вот, в общем-то и все с html! Все действительно просто – перейдём к css.

CSS3 прелести

Ниже Вы видите основные свойства. Для каждого эффекта будет разный файл .css, поэтому если хотите, можете объединить все эффекты в один файл.

Рассмотрим каждый эффект в отдельности.


→ Пример 1

эффект при наведении, эффект при наведении на изображение, css3 эффекты

Добавим специальный класс effect к элементу с классом view, чтобы активировать эффект. Получим следующее:

По причине экономии места я опустил префиксы (-moz-,-webkit- и т.д.), но вы найдете все их в исходниках.

Кроме использования border для создания треугольника, я использовал несколько переходов, что позволяет мне лучше контролировать каждое свойство во время анимации.


→ Пример 2

эффект при наведении, эффект при наведении на изображение, css3 эффекты

Синтаксис в этом примере немного отличается. все также необходимо добавить второй класс second-effect, но в данном случае поместить ссылку внутри div с классом mask. То есть, вот так:

В этом примере мы будем работать с параметрами свойства border. Также применено положение box-sizing. Это свойство используется для расчета ширины и высоты элементов.


→ Пример 3

эффект при наведении, эффект при наведении на изображение, css3 эффекты

Для применения эффекта, все также необходимо добавить второй класс, только теперь с названием third-effect.

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


→ Пример 4

эффект при наведении, эффект при наведении на изображение, css3 эффекты

Здесь кода мало, по сравнению с предыдущими примерами, однако эффект при наведении будет очень внушительным.

Используя только класс mask, в сочетании с border-radius будет действительно красивый эффект при наведении на изображения.

Я также использовал visibility, которое позволяет создать в конце переход transition.


→ Пример 5

эффект при наведении, эффект при наведении на изображение, css3 эффекты

Последний пример имеет такой же код, как и четвертый пример, только с разницей в названии второго класса, вместо fourth-effect на fifth-effect.

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

Заключение

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

Спасибо за внимание! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.alessioatzeni.com/blog/css3-hover-effects/
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Михаил:
      http://webavtopro.ru/ @

      У меня почему-то эффект под картинкой.

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Каким браузером пользуетесь?

        1. Михаил:
          http://webavtopro.ru/ @

          Хромом

          1. Влад Бондаренко (Admin):
            http://vladmaxi.net

            Работу в хроме (Версия 34.0.1847.116) проверил – всё работает чётко. Возможно, вам необходимо обновить версию браузера, если таковое действие не сделано, либо попробовать очистить кэш и cookies браузера.

    1. Михаил:
      http://webavtopro.ru/ @

      обновил версию php, правда уже другой эффект прикрутил, возможно в ней было дело

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