ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект размытия для изображения на CSS

Эффект размытия для изображения на CSS

Материал под красивый эффект, который идет для размытия изображения, где смотрится оригинально и происходит при наведении курсора с помощью CSS. Это очень крутой по просмотру трюк, где можно задействовать на любую картинку, которая находится на интернет ресурсе. Где вы видя изображение и наводите на него курсор, и за доли секунды оно изменяется, а точнее становится размытым.

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

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

Вид при открытие страницы или сайта:

Здесь корректное изображение при наведении курсора:

HTML

Код

CSS

Код

.kugades-puanem {
  margin: 20px 20px 0;
  padding: 0;
}
.kugades-puanem:last-child {
  padding-bottom: 55px;
}
.kugades-puanem::after {
  content: '';
  clear: both;
  display: block;
}
.kugades-puanem div {
  position: relative;
  float: left;
  width: 325px;
  height: 245px;
  margin: 0 0 0 30px;
  padding: 0;
}
.kugades-puanem div:first-child {
  margin-left: 0;
}
.kugades-puanem div span {
  position: absolute;
  bottom: -20px;
  left: 0;
  z-index: -1;
  display: block;
  width: 325px;
  margin: 0;
  padding: 0;
  text-decoration: none;
  text-align: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  opacity: 0;
}
figure {
  width: 595px;
  height: 285px;
  margin: 0;
  padding: 0;
  background: #ededf3;
  overflow: hidden;
  cursor:pointer;
}

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

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

Демонстрация

30 Мая 2019 Загрузок: 1 Просмотров: 1268 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0