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

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

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

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

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

Как пример:

Установка:

HTML

Код

<div>
 <h1>ZorNet.Ru - портал для вебмастера</h1>
 Наведите на картинку, чтобы увидеть фильтры в действии
<ul>
 <li>
 <img src="http://zornet.ru/_fr/63/1208443.jpg">
 <kbd>фильтр: размытие (3 пикселя)</kbd>

 </li>
 <li><img src="http://zornet.ru/_fr/63/9897722.jpg"><kbd>фильтр: яркость (40%)</kbd></li>
 <li><img src="http://zornet.ru/_fr/63/7328874.jpg"><kbd>фильтр: контраст (10%)</kbd></li>
 <li><img src="http://zornet.ru/_fr/63/4242311.jpg"><kbd>фильтр: оттенки серого (.75)</kbd></li>
 <li><img src="http://zornet.ru/_fr/63/3004164.jpg"><kbd>фильтр: насыщенный (300%)</kbd></li>
 <li><img src="http://zornet.ru/_fr/63/1031238.jpg"><kbd>фильтр: сепия (100%)</kbd></li>
 <li><img src="http://zornet.ru/_fr/63/1708704.jpg"><kbd>фильтр: оттенок-поворот (270 градусов)</kbd></li>
 <li><img src="http://zornet.ru/_fr/63/9673315.jpg"><kbd>фильтр: инвертированный (100%)</kbd></li>
 <li><img src="http://zornet.ru/_fr/63/1605624.jpg"><kbd>фильтр: непрозрачность (50%)</kbd></li>
 <li><img src="http://zornet.ru/_fr/63/2397334.jpg"><kbd>filter: url(#posterize)</kbd></li></ul></div>

CSS

Код

ul {
  list-style: none;
}
ul:after {
  content: "";
  display: table;
  clear: both;
}
li {
  width: 35%;
float: left;
  position: relative;
  margin: 1%;
}
img {
  display: block;
  width: 100%;
  transition: .5s ease-in-out;
  cursor:pointer;
}
li:nth-child(1):hover img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}
li:nth-child(2):hover img {
  -webkit-filter: brightness(40%);
  filter: brightness(40%);
}
li:nth-child(3):hover img {
  -webkit-filter: contrast(10%);
  filter: contrast(10%);
}
li:nth-child(4):hover img {
  -webkit-filter: grayscale(.75);
  filter: grayscale(.75);
}
li:nth-child(5):hover img {
  -webkit-filter: saturate(300%);
  filter: saturate(300%);
}
li:nth-child(6):hover img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}
li:nth-child(7):hover img {
  -webkit-filter: hue-rotate(270deg);
  filter: hue-rotate(270deg);
}
li:nth-child(8):hover img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
li:nth-child(8):hover span {
  color: white;
}
li:nth-child(9):hover img {
  -webkit-filter: opacity(50%);
  filter: opacity(50%);}
li:nth-child(10):hover img {
  -webkit-filter: url(#posterize);
  filter: url(#posterize);
}
span {
  text-align: center;
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  opacity: 0;
}
li:hover span {
  bottom: 10px;
  opacity: 1;
}
p {
  text-align: center;
}
@media (max-width:480px) {
  li {
  width: 100%;
  float: none;
  }
}

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

Здесь подчеркиваем, что можно задействовать несколько эффектов, а это поставить не один, а к примеру 2 фильтра на картинку, где все идет одновременно, в плане эффекта. Это классический способ, где задействован в применение заданных эффектов, которые срабатывают при наведении на элемент :hover.

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

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

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

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

СКАЧАТЬ

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

Kosten

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