Вот пример.
TLDR:
1. Создаем before и after и для каждого из них делаем отдельный linear-gradient. Создаем событие hover и затемняем ненужный нам градиент.
Привет.
Можно сделать от 0px - 768px чтобы они были в одну строку.
Пиши в медиа запросе для изображений:
display: block;
height: 200px;
width: auto;
Это самое простое решение.
