On hover: Move div up, on top of sibling

Question

I have the following setup:

<div class="" style="height: 400px !important;
                     width: 100% !important;
                     overflow: hidden;">
  <div class="" style="height: 400px !important;
                       width: 100% !important;
                       background-color: red;">
  </div>
  <div class="" style="height: 400px !important;
                       width: 100% !important;
                       background-color: blue;">
  </div>
</div>

So there's a div, which has a certain height. There are two divs inside it which have the same height, which means that their height together is twice as much as their container div. Overflow is hidden, so only the first div is showing.

I now want to wait for the user to hover, then animate and move the second div up, so that the second div is hiding the first div now. On unhover, I want to revert the whole thing.

How would I do something like this, am I on the right track?

Answer 1

You can use CSS transforms for this. When hovering the container div a transform is applied to the inner divs.

The transition rule is used to show the change in position when a hover starts and stops.

 .container { height: 400px; overflow: hidden; } .container:hover .inner-2 { transform: translateY(-100%); } .inner { height: 100%; transition: transform .6s ease-in-out; } .inner-1 { background-color: rgba(255,0,0,.5); } .inner-2 { background-color: rgba(0,0,255,.5); } 

 <div class="container"> <div class="inner inner-1"></div> <div class="inner inner-2"></div> </div> 

JSFiddle

It's worth noting that this method is much less processor intensive than the answers suggesting absolute positioning the element or changing its margin and will also result in a much smoother transition.

Sources: https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ and https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Answer 2

Its hard to reach nice animation when you overflow container, code below just swap them on hover:

CSS

Default state

   div>div:first-child {
      display: block;
   }

   div>div:last-child {
      display: none;
   }

Hover state

   div:hover>div:first-child {
      display: none;
   }

   div:hover>div:last-child {
      display: block;
   }

Alternative height rising

 div { position: relative; } div>div:first-child { position: absolute; left: 0; top: 0; } div>div:last-child { left: 0; bottom: 0; position: absolute; height: 0 !important; z-index: 1; transition: height .5s linear; } div:hover>div:last-child { height: 400px !important; } 

 <div class="" style="height:400px !important; width:100% !important; overflow:hidden;"> <div class="" style="height:400px; width:100% !important; background-color: red;"> </div> <div class="" style="height:400px; width:100% !important; background-color: blue;"> </div> </div> 

Answer 3

Yes, you are on the right track. I would advise to not use inline styles though, but instead use classes and CSS markup .

You can use for example the margin for offsetting. This can be animated using CSS transitions .
I show this below.

 .parent { height: 100px; overflow: hidden; } .parent:hover .child:first-child { margin-top: -100px; } .child { height: 100px; transition: margin-top 1s; } .red { background-color: red; } .blue { background-color: blue; } 

 <div class="parent"> <div class="child red"> </div> <div class="child blue"> </div> </div> 

Answer 4

To achieve this you can use CSS alone. If you wrap the child divs in another div which has it's margin-top animated when the container div is hovered, something like this:

 .container { height: 400px; width: 100%; overflow: hidden; position: relative; } .child { height: 400px; width: 100%; } .slide { margin-top: 0; transition: margin 0.3s; } .container:hover .slide { margin-top: -400px; } .child.red { background-color: red; } .child.blue { background-color: blue; } 

 <div class="container"> <div class="slide"> <div class="child red"></div> <div class="child blue"></div> </div> </div> 

Alternatively you can just shrink the height of the first div, but this can cause overflow issues, depending on what the content of that element is:

 .container { height: 400px; width: 100%; overflow: hidden; position: relative; } .child { height: 400px; width: 100%; transition: height 0.3s; } .container:hover :first-child { height: 0; } .child.red { background-color: red; } .child.blue { background-color: blue; } 

 <div class="container"> <div class="child red"></div> <div class="child blue"></div> </div> 

Answer 5

Here's a working Fiddle

HTML

<div class="container" style="height:400px !important; width:100% !important; overflow:hidden;">
  <div class="top" style="height:400px !important; width:100% !important; background-color: red;">
  </div>

  <div class="bottom" style="height:400px !important; width:100% !important; background-color: blue;">
  </div>
</div>

CSS

.container:hover .bottom{
  top: -400px;
}

.bottom{
  position: relative;
  top: 0px;
  transition-property: top;
  transition-duration: 1s;
}

The bottom div inside the container is relatively positioned and moves to the top when the container has the hover state.