cover
картинка с размерами x1 и y1 (ширина и высота)
контейнер с размерами x2 и y2
сравниваем отношение ширины к высоте
если x1/y1 < x2/y2 значит вписываем по ширине.
(xN новая ширина картинки, yN новая высота картинки)
xN = x2
yN = x2/x1*y1
это пропорциональное увеличение
По вертикали нужно "отрезать": k = yN - y2
Для простоты блок обертку сделала всегда одинаковых пропорций 2 к 1. Иначе пришлось бы еще media писать и для размеров и для ориентации.
Картинку пришлось заскринить и получилась она 290х328. Отсюда, с учетом пропорций блока background-size 30% 67.93%
При открытии добавлять какой-то класс, например, active. А к нему уже ::before.
Через js напрямую не достучаться до псевдоэлементов, потому что они псевдо.