css - Centered overflow on :active - Stack Overflow

I would like to display larger versions of images (embedded in a figure tag) when the user clicks the image, such that the image overflows its container equally on both sides. This is what I tried:

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

As intended, the image moves to the left by 5rem, but the size remains unchanged. If I reduce the size for the &:active selector, however (e.g. calc(100% - 5rem);), the image is rendered smaller when clicked. What am I missing here?

I would like to display larger versions of images (embedded in a figure tag) when the user clicks the image, such that the image overflows its container equally on both sides. This is what I tried:

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

As intended, the image moves to the left by 5rem, but the size remains unchanged. If I reduce the size for the &:active selector, however (e.g. calc(100% - 5rem);), the image is rendered smaller when clicked. What am I missing here?

• css

Share Improve this question Follow asked Jan 3 at 17:28 janedenjaneden 46144 silver badges1212 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

I assume you need to give your image a width of 100%, as you're only changing the size of the frame.

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

If that doesn't work, check your image is big enough to expand without stretching.

With RichardB's help, I came up with the following solution:

figure {
    display: block;
    height: auto;
    max-width: 90%;
    margin: 1rem auto 1rem auto;
    &:active {
        max-width: 150%;
        margin: 1rem -5rem 1rem -5rem;
    }
    & img {
        width: 100%;
        max-width: 100%;
        margin: 0rem auto 0rem auto;
    }
}

While my calc() approach was obviously too clever, the same negative margin on both sides delivers an enlarged and centered image, as desired.