Домой / Архивы с метками: hover effect

Архивы с метками: hover effect

Прикольный ховер-эффект для изображения на CSS

Прикольный ховер эффект для изображения на CSS

Здравствуйте друзья! Сегодня я предлагаю вашему внимаю пример создания hover-эффекта для изображений. В данном примере при наведении курсором мышки изображение затемняется серым цветом, и при этом выплывает сверху на середину изображения иконка лупы. Изменить иконку лупы которая появляется при наведении на изображение на любую другую очень просто! Для этого необходимо в классе .gallery a:before изменить ссылку фона в свойстве background на адрес другой иконки. Для ... Читать далее »

Оригинальные hover-эффекты для кнопок на CSS3

Оригинальные hover-эффекты для кнопок на CSS3

Здравствуйте друзья! Сегодня я хочу обратить ваше внимание на набор оригинальных hover-эффектов для кнопок, созданных с помощью CSS3. Данные эффекты можно применить не только для обычных кнопок, ограничения существуют практически только в фантазии :). При проверке кроссбраузерности эффектов я нашел проблемы только с двумя эффектами в FireFox (в демо примере они на букве G и H). В остальных браузерах (IE11, Opera, Chrome, ... Читать далее »

Hover-эффект для изображений с помощью CSS параметра :not(:hover)

Hover-эффект для изображений с помощью CSS параметра :not(:hover)

Приветствую друзья! В этой статье хочу обратить ваше внимание на создание оригинального hover-эффекта для изображений. Данный ховер-эффект затемняет все изображения кроме того, на которого наведен курсор мышки. Достичь такого эффекта удается с помощью CSS условия :not (:hover). С помощью условия :not (:hover) можно выделить не выбранные объекты. Например, если навести курсор на одно изображение вступает в силу свойство hover, и теперь можно задать ему необходимые параметры (к примеру ... Читать далее »

Галерея с эффектом размытия фона (blur effect)

Галерея с эффектом цветового размытия фона (blur effect)

Пример создания галереи с очень интересным эффектом. При наведении на изображение меняется фон, в зависимости от выбранного изображения. На фоне мы видим размытое изображения из галереи, на которое мы навели курсором мышки. Если из CSS кода убрать: Мы получим не размытый, а изображение из галереи на которое мы навели мышкой, но в полном размере и без эффекта размытия. Как видите, таким ... Читать далее »

Hover-эффект трансформации текста SkewY

Эффект трансформации текста SkewY

Хороший и достаточно интересный пример создания оригинального и необычного SkewY hover-эффекта для текста. В данном примере, при наведении на текст наклоняется одна из осей. Трансформация skewX сдвигает все y-координаты на определенный угол, оставляя x-координаты без изменения. Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. ... Читать далее »

Красивый hover-эффект для изображения (фото)

Красочный hover-эффект для изображения (фото)

Предлагаю вашему вниманию пример реализации красочного hover-эффекта при наведении мышкой на изображение. Эффект реализован с использованием только каскадной таблицы стилей CSS. HTML CSS Читать далее »

Lightspeed hover эффект

Lightspeed hover эффект

Оригинальный пример hover-эффекта, который отлично подойдет для использования в меню. Цветовое решение и скорость эффекта можно легко изменить. Hover-эффект реализован с помощью CSS. Если есть вопросы, задавайте в комментариях. HTML CSS Читать далее »

Вращающееся кнопки с помощью CSS

Вращающееся кнопки с помощью CSS

Очень оригинальный и интересный пример создание кнопок с эффектом вращения границ при наведении (hover-effect). Изменяя CSS свойство animation можно любому из примеров уменьшать или увеличивать скорость вращения.   HTML CSS Читать далее »