CODEWITHSUNDEEP
htmlcss
Katalhama
Katalhama

Reputation: 55

Keep div width after expanding it with hover (CSS)

I want to keep a div's width after expanding it doing hover on another element. That's my code:

CSS:

div.container{
width: 400px;
height: 250px;
border: 1px solid;
clear: both;

}

.square{
width: 100px;
height: 100px;  
background: black;
float: left;
position: relative;
}

.grow {
width: 0px;
height: 100px;
float: left;
background: black; 
position: relative; 
transition:width 0.5s; 
-webkit-transition:width 0.5s;
background: green;
}

.square:hover + .grow {
width: 200px; 
}

And there's my html:

<div class="container">
        <div class="square"></div>
        <div class="grow"></div>
</div>

I want a only CSS solution. I know that it's simple with JS, but I really need this using CSS.

Thanks a lot!

Upvotes: 1

Views: 976

Answers (2)

CherryFlavourPez
CherryFlavourPez

Reputation: 7497

Using animation (rather than a transition) is an option:

.container {
    width: 400px;
    height: 250px;
    border: 1px solid;
}

.square {
    width: 100px;
    height: 100px;  
    background: black;
    float: left;
    position: relative;
}

.grow {
    width: 0;
    height: 100px;
    float: left;
    background: black; 
    position: relative; 
    transition: width 0.5s; 
    background: green;
    animation-fill-mode: both;
    animation-name: extend;
    animation-duration: 1000ms;
    animation-play-state: paused;
}

.square:hover + .grow {
    animation-play-state: running;    
}

@keyframes extend {
    0% { width: 0; }
    100% { width: 200px; }
}
<div class="container">
        <div class="square"></div>
        <div class="grow"></div>
</div>

Lea Verou's article is a good read: basically we're toggling the animation-play-state between paused and running, and using animation-fill-mode to ensure the expanded div keeps the styling we want once the animation is complete. There's a fiddle here.

The downside here is if you hover the .square but take the cursor off before the animation finishes, then the .grow. div is 'stuck' halfway (this may or may not be a problem, and it'll probably be an issue with any CSS-only solution).

Upvotes: 2

Juan Cort&#233;s
Juan Cort&#233;s

Reputation: 21122

Set an extremely high transition time for the shrinking animation part, which will give the effect of not shrinking. No js required, just setting it to something like 3600s (maybe try even higher?) which will be an hour will give you a visually static for a long time. I couldn't find the maximum time but it seems to work.

div.container{
    width: 400px;
    height: 250px;
    border: 1px solid;
    clear: both;
}

.square{
    width: 100px;
    height: 100px;  
    background: black;
    float: left;
    position: relative;
    transition:width 5s; 
    -webkit-transition:width 5s;
}

.grow {
    width: 0px;
    height: 100px;
    float: left;
    background: black; 
    position: relative; 
    transition:width 3600s; 
    -webkit-transition:width 3600s;
    background: green;
}

.square:hover + .grow{
    width: 200px; 
    transition:width 0.5s; 
    -webkit-transition:width 0.5s;
}
<div class="container">
        <div class="square"></div>
        <div class="grow"></div>
</div>

Upvotes: 3

Related Questions