Programmiererforum

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

Ich möchte größere Versionen von Bildern anzeigen (eingebettet in ein Figure-Tag), wenn der Benutzer auf das Bild klickt, sodass das Bild seinen Container auf beiden Seiten gleichmäßig überfüllt. Das habe ich versucht:
[code]figure {
display: block;
height: auto;
max-width: 90%;
margin: 1rem auto 1rem auto;
&:active {
max-width: calc(100% + 5rem);
margin-left: -5rem;
}
}
[/code]
Wie vorgesehen verschiebt sich das Bild um 5rem nach links, die Größe bleibt jedoch unverändert. Wenn ich jedoch die Größe für den Selektor &:active reduziere (z. B. calc(100% - 5rem);), wird das Bild beim Klicken kleiner gerendert. Was übersehe ich hier?