Главная » Сниппеты » Эффект прозрачности для изображений при наведении с помощью CSS3

Эффект прозрачности для изображений при наведении с помощью CSS3

Эффект прозрачности для изображений при наведении с помощью CSS3

Как оригинально оформить в момент взаимодействия с пользователем? То есть как-то интересно выделить картинку при наведении на неё указателя мыши.
Технических решений этой задачи предостаточно и расписаны они в мельчайших подробностях. Так что нового ничего не открою, а просто-напросто поделюсь простеньким фрагментом кода CSS, который в разных вариация часто использую сам.

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

Показал сразу два варианта использования свойства opacity. В первом случае прозрачность включается при наведении на картинку, а во втором, изображение изначально выводится с легкой размытостью и уже при наведении на него наводится резкость.

Думается мне что у вас, как и у меня нет надобности применять такой эффект для всех изображений скопом, так что достаточно создать отдельный класс, чтобы особо не мудрить, например класс .opacity, присвоить его нужной картинке, и уже в css экспериментировать с различными вариациями одноименного свойства.
Можно ограничиться одним единственным свойством opacity регулируя уровень прозрачности в ту или иную сторону, а можно добавить некую иллюзию плавности перехода используя универсальное свойство transition с определенными значениями.
Применительно первого варианта рассматриваемого примера, я использовал следующие значения:

.opacity {
-moz-transition: all 0.4s; 
-webkit-transition: all 0.4s;  
-ms-transition: all 0.4s;  
-o-transition: all 0.4s;  
transition: all 0.4s; 
opacity:1;
filter:alpha(opacity=100);
}
 
.opacity:hover {
opacity:0.5;
filter:alpha(opacity=50);
}

filter:alpha прописал не случайно, без этого костыля IE8 напрочь откажется обрабатывать прозрачность, так что пока ещё уйма народа пользуют этот недобраузер, незабываем о примочках. То же самое и с префиксами у свойства transition для других браузеров, единой поддержки стандартов пока нет, а значит для надежности указываем конкретно)))

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

.clarity {
opacity:0.5;
filter:alpha(opacity=50);   
}
 
.clarity:hover {
-moz-transition: all 0.4s; 
-webkit-transition: all 0.4s;  
-ms-transition: all 0.4s;  
-o-transition: all 0.4s;  
transition: all 0.4s; 
opacity:1;
filter:alpha(opacity=100);
}

В примере, для второго варианта прописал класс .clarity, как говориться, что первое взбрело на ум, особо на этом аспекте не зацикливайтесь, здесь на что хватит фантазии, как обзовёте, с тем и будете работать))).

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

С уважением, Андрей.

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. Dogica says:

    Спасибо за простой и рабочий способ!

    Кай

    Ответить
  2. Витос says:

    Классная статья! Давно хотела знать как делать такой эффект! Спасибо)))

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru