Expanding a div over another div on hover with transitions

Question

I have divs styled as columns

[div1][div2][div3]

I want to expand each div individually on a cursor hover like so (overlaying the other divs somehow):

[div1..................]

I've got it working like this thus far: https://codepen.io/Cigoler/pen/VMZeaB

 body { background: #cacaca; padding: 5em; } .container { position: relative; width: 100%; overflow: hidden; } .item { padding: 0.25em; text-align: center; display: inline-block; width: 33%; height: 200px; background: whitesmoke; vertical-align: middle; } .item:hover { cursor: pointer; position: absolute; left: 0; width: 100%; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .test1 { background: #c3c3c3; } .test2 { background: #fafafa; } .test3 { background: #474747; color: white; } 

 <div class="row expanded"> <div class="container"> <div class="item test1"> <p>Test One</p> </div> <div class="item test2"> <p>Test Two</p> </div> <div class="item test3"> <p>Test Three</p> </div> </div> </div> 

The problem is; I want to take it further and smoothly animate the transition. However it becomes janky whenever I add even a simple transition. I'm guessing it's because the browser is fighting between the divs in-between the animations.

Any help for solving this problem?

Answer 1

Instead of positioning you can use a CSS3 solution based on flexbox -

1. Add display: flex to the container

2. Add min-width: 0 to the item and flex: 1 1 0% which set the flexbox to grow and shrink as it seems fit and set a flex-basis of zero.

3. Add flex-basis: 100% to item:hover and remove absolute positioning

See demo below:

 body { background: #cacaca; padding: 5em; } .container { position: relative; width: 100%; overflow: hidden; display: flex; /* ADDED */ } .item { flex: 1 1 0%; /* ADDED */ min-width: 0; /* ADDED */ /*padding: 0.25em;*/ text-align: center; display: inline-block; width: 33%; height: 200px; background: whitesmoke; vertical-align: middle; } .item:hover { cursor: pointer; /*position: absolute;*/ /*left: 0;*/ flex-basis: 100%; /* ADDED */ -webkit-transition: flex-basis 0.3s ease-out; /* MODIFIED */ transition: flex-basis 0.3s ease-out; /* MODIFIED */ } .test1 { background: #c3c3c3; } .test2 { background: #fafafa; } .test3 { background: #474747; color: white; } 

 <div class="row expanded"> <div class="container"> <div class="item test1"> <p>Test One</p> </div> <div class="item test2"> <p>Test Two</p> </div> <div class="item test3"> <p>Test Three</p> </div> </div> </div> 

Answer 2

You can try making the div.item position absolute by default.Then on hover change the width and left position of the div

A sample

 body { background: #cacaca; padding: 5em; } .container { position: relative; width: 100%; } .item { padding: 0.25em; text-align: center; display: inline-block; width: 33%; height: 200px; background: whitesmoke; vertical-align: middle; position: absolute; } .item:hover { cursor: pointer; left: 0; width: 100%; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 999; } .test1 { background: #c3c3c3; left: 0px; } .test2 { background: #fafafa; left: 33%; } .test3 { background: #474747; color: white; left: 66%; } 

 <div class="row expanded"> <div class="container"> <div class="item test1"> <p>Test One</p> </div> <div class="item test2"> <p>Test Two</p> </div> <div class="item test3"> <p>Test Three</p> </div> </div> </div>