Элементы, находящиеся рядом с друг другом, при наличии opacity просвечивают друг друга. Как справится с этим?
Фотошоп не нужен. Прозрачность не нужна.
Берете такую разметку
div>img
div>img
div>img
и примерно такие стили
div::after { rgba(цвет фона, прозрачность); pos:a;  }
и управляете при наведении прозрачностью наложенного поверх картинки псевдоэлемента
Ну если ориентироваться на этот скриншот prntscr.com/9iad8g, и задний фон всегда монохромный без узоров и градиентов, то opacity вообще не нужен. Отрисовать каждый кружок в 2 состояниях, активный и пассивный, а при наведении играться с z-index и src