Эффект при наведении на картинку для галереи

Этот простой hover эффект CSS для картинок может пригодиться при создании галереи из картинок. Цвет при наведении можно подобрать под стилистику вашего сайта.

Пример

HTML


<div class="hover-image-gallery">
  <a href="image.jpg"> <!-- ССылка на изображение -->
    <img src="image-thumbnail.jpg" alt="" /> <!-- Миниатюра изображения -->
  </a>
</div>

CSS


.hover-image-gallery a {
  display: inline-block;
  background: #ff921e; /* Меняем цвет на свой */ 
  line-height: 0;
}
.hover-image-gallery a img {
  transition: filter 0.5s linear;
  filter: brightness(2) grayscale(1) opacity(0.5);
}
.hover-image-gallery a:hover img {
  filter: none;
}