Как правильно затемнит картинку при наведении?

Question

[Vlad_beg]

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

Задан темный цвет для класса

img-block img {
  background: rgba(86,83,84,1);
}

Наведение на блок с картинкой

.img-block:hover img {
  opacity: 0.5;
}

И так же при наведениее на картинку при ее увелечении пропадает padding между картинками, как это можно убрать?

Полный код: https://jsfiddle.net/kani339/yz5rdts0/2/

Answer 1

[Ankhena]

Вам нужно изменять не background, а применять фильтры https://html5book.ru/css3-filtry/

Чтобы не "прыгало" замените width на max-width для картинок и padding на margin у .image-portfolio

p.s.
Еще нужно пересмотреть структуру. Очень много лишних div.
И для картинок с подписями отлично подходят теги figure и figcaption.

Comments

[Vlad_beg]

Спасибо большое!

Answer 2

[vivat4]

Посмотрите в сторону фильтров. Вот хороший материал на эту тему с живыми примерами - paratapok.ru/frontend/4668_css3-filtry