CODEWITHSUNDEEP
htmlcssflexboxcss-transitions
Cigol
Cigol

Reputation: 105

Expanding a div over another div on hover with transitions

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?

Upvotes: 4

Views: 2958

Answers (2)

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 4

XYZ
XYZ

Reputation: 4480

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>

Upvotes: 3

Related Questions