Question 420570 in CSS Question posted in
Some basic documentation can be found here.

Css – Centered overflow on :active

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search