How can i make css animation

Question

i have 2 images, and one background: (red and brown are images)

(white is background)

When i hover on first or second image it will slide to left/right side. Like a doors in shop. Slide both in same time (no only one).

Can someone help me? Thanks.

Answer 1

I tried the accepted answer but it's a bit buggy (in firefox more so) if you put your cursor over the center and it bounces the sides back and forth and doesn't open. Personally I'd do something more like this.

CODEPEN TO PLAY WITH

#stage {
  width: 20rem;
  height: 15rem;
  background: green;
  border: black 1px solid;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

span {
  color: white;
  font-size: 150%;
}

#left-curtain, #right-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10rem;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#left-curtain {
  background: red;
  left: 0;
}

#right-curtain {
  background: blue;
  right: 0;
}

#stage:hover #left-curtain {
  left: -10rem;
}

#stage:hover #right-curtain {
  right: -10rem;
}

<div id="stage">
  <span>PEEK - A - BOO!</span>
  <div id="left-curtain">Mouse</div>
  <div id="right-curtain">Over</div>
</div>

Answer 2

Here is my quick and dirty solution. It's not perfect and perhaps someone else can fine tune it - but it works. Javascript/jQuery might allow you to come up with a more complete solution.

Hope this helps.

.l,
.r {
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
  width: 200px;
  height: 100px;
}

.container {
  width: 400px;
}

.l {
  background-color: red;
  float: left;
}

.r {
  background-color: brown;
  float: right;
}

.container:hover div {
  width: 150px;
}

<div class='container'>
  <div class='l'>
  </div>
  <div class='r'>
  </div>
</div>