CSS animation to have divs overlap each other when hovered over and return to position after

user_4602500 0
Viewed 128

I have a bit of a hard time figuring this one out. CSS vets help me out here :)

I want to have images (in the example they are denoted as divs with background colors) overlap each other while hovered upon with animation and return to their respective place when the hover is over with the same animation.

In this example, you can see three sections of different colors move smoothly to the left or the right and then return to the position when the hover is off. My current code:

.images_parent {
  width: 100%;
}

.images_parent>* {
  width: 10%;
  position: absolute;
  transition: margin-left 1s;
}


/*#i*/

#i:hover>* {
  z-index: 1;
}

#i:hover #a {
  margin-left: 20%;
  transition: margin-left 2s ease-in-out;
}

#i:hover #b {
  margin-left: 10%;
}

#a {
  background-color: blue;
}

#b {
  background-color: blue;
}

#c {
  background-color: blue;
}


/*#i*/


/*#i2*/

#i2 {
  margin-left: 10%;
}

#i2:hover>* {
  z-index: 1;
}

#i2:hover #a2 {
  margin-left: -10%;
  transition: margin-left 1s;
}

#i2:hover #b2 {
  margin-left: 10%;
}

#a2 {
  background-color: brown;
}

#b2 {
  background-color: brown;
}

#c2 {
  background-color: brown;
}


/*#i2*/


/*#i3*/

#i3 {
  margin-left: 20%;
}

#i3:hover>* {
  z-index: 1;
}

#i3:hover #a3 {
  margin-left: -20%;
  transition: margin-left 2s ease-in-out;
}

#i3:hover #b3 {
  margin-left: -10%;
}

#a3 {
  background-color: darkgreen;
}

#b3 {
  background-color: darkgreen;
}

#c3 {
  background-color: darkgreen;
}


/*#i3*/
<div>
  <div id="i" class="images_parent">
    <div id="a">image3</div>
    <div id="b">image3.1</div>
    <div id="c">image3.2</div>
  </div>
  <div id="i2" class="images_parent">
    <div id="a2">image2</div>
    <div id="b2">image2.1</div>
    <div id="c2">image2.2</div>
  </div>
  <div id="i3" class="images_parent">
    <div id="a3">image3</div>
    <div id="b3">image3.1</div>
    <div id="c3">image3.2</div>
  </div>
</div>

https://jsfiddle.net/cbn2z7f6/

The problem is if we de-comment the position:absolute of images_parent then we can see that it does not look very beautiful.

I would like to ask if anyone knows how to do this correctly. Either with only forward animation or forward and backward animations. Both solutions would work for me. Of course, having images retract would look nicer, but it doesn't matter too much. Thank you.

css html
1 Answers

.top {
  transform-style: preserve-3d;
}

.images_parent {
  width: 100%;
  transition: all 2s;
  transform: translate3d(0, 0, 0);
}

.images_parent > * {
  width: 10%;
  position: absolute;
  transition: all 2s;
}

/*#i*/

#i:hover {
  transform: translate3d(0, 0, 10px);
}

#i:hover #a {
  transform: translate3d(200%, 0, 20px);
}

#i:hover #b {
  transform: translate3d(100%, 0, 10px);
}

#a {
  background-color: blue;
}
#b {
  background-color: blue;
}
#c {
  background-color: blue;
}
/*#i*/

#i2:hover {
  transform: translate3d(0, 0, 10px);
}

#i2:hover #a2 {
  transform: translate3d(100%, 0, 20px);
}

#i2:hover #b2 {
  transform: translate3d(-100%, 0, 10px);
}

/*#i2*/
#i2 {
  margin-left: 10%;
}

#a2 {
  background-color: brown;
}
#b2 {
  background-color: brown;
}
#c2 {
  background-color: brown;
}
/*#i2*/

#i3:hover {
  transform: translate3d(0, 0, 10px);
}

#i3:hover #a3 {
  transform: translate3d(-200%, 0, 20px);
}

#i3:hover #b3 {
  transform: translate3d(-100%, 0, 10px);
}

/*#i3*/
#i3 {
  margin-left: 20%;
}

#a3 {
  background-color: darkgreen;
}
#b3 {
  background-color: darkgreen;
}
#c3 {
  background-color: darkgreen;
}
/*#i3*/
<div class="top">
  <div id="i" class="images_parent">
    <div id="a">image3</div>
    <div id="b">image3.1</div>
    <div id="c">image3.2</div>
  </div>
  <div id="i2" class="images_parent">
    <div id="a2">image2</div>
    <div id="b2">image2.1</div>
    <div id="c2">image2.2</div>
  </div>
  <div id="i3" class="images_parent">
    <div id="a3">image3</div>
    <div id="b3">image3.1</div>
    <div id="c3">image3.2</div>
  </div>
</div>

user_97382140
Related