Гостевой вход

Вы не залогинились
12:16

15 HOVER-эффектов для изображений с помощью CSS

Категория: Эффекты с изображениями

Метки: Zoom для изображений, hover-эффекты, цветовой переход для изображений
CSS-технологии в настоящее время дают широкий спектр возможностей для создания различных эффектов, переходов, анимаций, которые визуально делают работу пользователя с элементами сайта более привлекательной.
В этом материале мы рассмотрим 15 различных HOVER-эффектов для изображений, которые могут украсить фотогалерею вашего сайта или портфолио.

Общий HTML-каркас для всех вариантов, изображение оборачиваем в тег figure:

Код

<figure><img src="здесь адрес изображения"></figure>


Далее я для каждого варианта буду писать CSS-стили и прикреплять ссылку на демо-страницу.

Вариант 1 "Зум изображения при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}


Вариант 2 "Зум изображения при наведении - 2"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure img {
  width: 300px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  width: 350px;
}


Вариант 3 "Обратный Зум изображения при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: scale(1);
  transform: scale(1);
}


Вариант 4 "Обратный Зум изображения при наведении - 2"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure img {
  width: 400px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  width: 300px;
}


Вариант 5 "Сдвиг изображения при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure img {
  margin-left: 30px;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  margin-left: 0;
}


Вариант 6 "Поворот изображения при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure img {
  -webkit-transform: rotate(15deg) scale(1.4);
  transform: rotate(15deg) scale(1.4);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}


Вариант 7 "Блёр изображения и резкость при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: blur(0);
  filter: blur(0);
}


Вариант 8 "Переход от чёрно-белого к цветному изображению при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}


Вариант 9 "Переход от сепии к цветному изображению при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}


Вариант 10 "Переход цветного к черно-белому изображению плюс блёр при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure img {
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: grayscale(100%) blur(3px);
  filter: grayscale(100%) blur(3px);
}


Вариант 11 "Переход к полупрозрачному изображению при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  opacity: .5;
}


Вариант 12 "Переход к полупрозрачному изображению при наведении - 2"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #1abc9c;
  overflow: hidden;
}

figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  opacity: .5;
}


Вариант 13 "Вспышка на изображении при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure:hover img {
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}
@-webkit-keyframes flash {
  0% {
  opacity: .4;
  }
  100% {
  opacity: 1;
  }
}
@keyframes flash {
  0% {
  opacity: .4;
  }
  100% {
  opacity: 1;
  }
}


Вариант 14 "Блик на изображении при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

  figure {
  position: relative;
}

figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
figure:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}
@-webkit-keyframes shine {
  100% {
  left: 125%;
  }
}
@keyframes shine {
  100% {
  left: 125%;
  }
}


Вариант 15 "Блик на изображении (расходящийся круг) при наведении"

Демо

CSS

Код

figure {
  width: 300px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure {
  position: relative;
}
figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: '';
  width: 0;
  height: 0;
  background: rgba(255,255,255,.2);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}
figure:hover::before {
  -webkit-animation: circle .75s;
  animation: circle .75s;
}
@-webkit-keyframes circle {
  0% {
  opacity: 1;
  }
  40% {
  opacity: 1;
  }
  100% {
  width: 200%;
  height: 200%;
  opacity: 0;
  }
}
@keyframes circle {
  0% {
  opacity: 1;
  }
  40% {
  opacity: 1;
  }
  100% {
  width: 200%;
  height: 200%;
  opacity: 0;
  }
}

Просмотров: 247 | Скачиваний: 0 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

    5 вариантов CSS3 HOVER-эффектов для изображений

    Рассмотрим пять различных вариантов эффектов для изображений при наведении, в которых используя свойство border, мы получаем довольно специфичные эффекты. Обращаю внимание, что демо-примеры будут работать только в современных браузерах, поддерживающих CSS3.

    3 варианта CSS3 HOVER-эффекта для изображений с подписями

    В современном интернет-сообществе существует множество методов, используемых для создания интерактивности на сайте, но, пожалуй, наиболее элегантным остаётся CSS, и, в частности, возможности, пришедшие к нам с появлением CSS3. Раньше, для создания каких-то эффектов, мы прибегали к помощи JavaScript технологий, но теперь, благодаря всё более растущей поддержке многими современными браузерами технологий CSS3, реализовать эффекты сейчас можно без каких-либо скриптов. Здесь мы рассмотрим три варианта различных эффектов для изображений, суть которых: появляющаяся подпись к изображению, сопровождается каким-то эффектом.

    Hover.css - набор CSS3 эффектов для элементов страницы сайта

    Hover.css представляет собой таблицу CSS-стилей, применимых к различным элементам на странице сайта (ссылкам, кнопкам, логотипам, SVG и просто изображениям), дающих в итоге различные визуальные эффекты, как то: трансформация, фоновые и граничные переходы, тени и свечение, пузыри и загнутые уголки и прочее. Вся прелесть в том, что вам достаточно подключить файл стилей hover.css на страницах своего сайта и прописать для нужных элементов страниц соответствующие эффектам классы и всё, можете любоваться!

    Плагин jQuery Easy Image Zoom

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

    Переход от чёрно-белого к цветному изображению на jQuery и CSS

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

    Эффект уменьшения изображения с помощью jQuery

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

Онлайн статистика

18.11.2017

Суббота

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: