CODEWITHSUNDEEP
css
Joe
Joe

Reputation: 15802

CSS expanding width

I'm trying to make a highlighted code block expand on mouse-hover to make it easier to read the code (this part is dead easy). The code block is fixed-width and centered.

jsFiddle

.code-wrapper {
    margin: auto;
    width: 50em;
}

pre {
    background: #e5e5e5;
    left: 0;
    max-width: 200%;
    overflow: auto;
    position: relative;
    transition: all 500ms;
    width: 100%;
}

pre:hover {
    left: -50%;
    width: 200%;
}

The only potential issue is that if the screen width is less than 120em (60em x 200%) then the code is going to expand off-screen.

Are there any ways to do this without javascript that prevent the code block expanding beyond the edges of the screen?

Upvotes: 1

Views: 79

Answers (1)

Vinod Dalvi
Vinod Dalvi

Reputation: 429

Try using the following CSS code:

@media all and (min-width: 85em){
    pre:hover {
        left: -25%;
        width: 150%;
    }    
}

@media all and (min-width: 110em){
    pre:hover {
        left: -50%;
        width: 200%;
    }    
}

Upvotes: 2

Related Questions