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

Приветствую друзья! В этой статье хочу обратить ваше внимание на создание оригинального hover-эффекта для изображений.

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

С помощью условия :not (:hover) можно выделить не выбранные объекты. Например, если навести курсор на одно изображение вступает в силу свойство hover, и теперь можно задать ему необходимые параметры (к примеру изменить цвет, наложить фильтр и т.д.).

Замечу, что данное условие можно использовать не только к изображениям, а например к спискам и т.д.

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

HTML

<section class="gallery">
 <img src="https://wp-lessons.com/wp-content/uploads/2015/01/hover-effekt-dlya-izobrazheniy-s-pomoshhyu-css-parametra-not-hover1.jpg" />
 <img src="https://wp-lessons.com/wp-content/uploads/2015/01/hover-effekt-dlya-izobrazheniy-s-pomoshhyu-css-parametra-not-hover2.png" />
 <img src="https://wp-lessons.com/wp-content/uploads/2015/01/hover-effekt-dlya-izobrazheniy-s-pomoshhyu-css-parametra-not-hover3.jpg" />
 <img src="https://wp-lessons.com/wp-content/uploads/2015/01/hover-effekt-dlya-izobrazheniy-s-pomoshhyu-css-parametra-not-hover4.jpg" />
 <img src="https://wp-lessons.com/wp-content/uploads/2015/01/hover-effekt-dlya-izobrazheniy-s-pomoshhyu-css-parametra-not-hover5.jpg" />
 <img src="https://wp-lessons.com/wp-content/uploads/2015/01/hover-effekt-dlya-izobrazheniy-s-pomoshhyu-css-parametra-not-hover6.jpg" />
 <img src="https://wp-lessons.com/wp-content/uploads/2015/01/hover-effekt-dlya-izobrazheniy-s-pomoshhyu-css-parametra-not-hover7.jpg" />
 <img src="https://wp-lessons.com/wp-content/uploads/2015/01/hover-effekt-dlya-izobrazheniy-s-pomoshhyu-css-parametra-not-hover8.png" />
 <img src="https://wp-lessons.com/wp-content/uploads/2015/01/hover-effekt-dlya-izobrazheniy-s-pomoshhyu-css-parametra-not-hover9.jpg" />
 <img src="https://wp-lessons.com/wp-content/uploads/2015/01/hover-effekt-dlya-izobrazheniy-s-pomoshhyu-css-parametra-not-hover10.jpg" />
</section>

CSS

body {
 margin: 10px 0 0 0;
 background-color: #1d1f20;
 text-align: center;
}
.gallery {
 text-align: center;
 font-size: 0;
 margin-top:200px;
 margin-bottom:100px;
}
.gallery img {
 width: 250px;
 height: 150px;
 margin: 2px 4px;
 -webkit-transition: 400ms 50ms;
 transition: 400ms 50ms;
}
.gallery:hover img:not(:hover) {
 -webkit-filter: saturate(50%);
 filter: saturate(50%);
 opacity: 0.4;
 -webkit-transition-delay: 0ms;
 transition-delay: 0ms;
}
a {
 color: #FFF;
 font-size: 23px;
 text-decoration:none;
}
a:hover {
 text-decoration:underline;
}