Центрированное переполнение: активно ⇐ CSS

[Anonymous]

Я хотел бы отображать увеличенные версии изображений (встроенные в тег рисунка), когда пользователь щелкает изображение, чтобы изображение одинаково выходило за пределы контейнера с обеих сторон. Вот что я пробовал:

Код: Выделить всё

figure {
display: block;
height: auto;
max-width: 90%;
margin: 1rem auto 1rem auto;
&:active {
max-width: calc(100% + 5rem);
margin-left: -5rem;
}
}

Как и предполагалось, изображение перемещается влево на 5рем, но размер остается неизменным. Однако если я уменьшу размер селектора &:active (например, Calc(100% - 5rem);), изображение будет уменьшено при нажатии. Что мне здесь не хватает?

Подробнее здесь: https://stackoverflow.com/questions/793 ... -on-active