stackoverflow

View on StackOverflow

I would like to know what really you want to do, split an image into two pieces? or two images one goes up and one goes down?

If the case is with two images you can visit this link, in the answers, you will see how to split to images, something like this:

#image {
    position: relative;
	width: 200px;
}

#half-image {
   	position: absolute;
   	top: 0;
   	left: 0;
   	width: 50%;
   	overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="image">
  <img src='https://placehold.it/200x200' id='outer' class='img-responsive'>
    <div id = "half-image">
      <img src='https://placehold.it/200/e8117f' id = 'inner'>
    </div>
</div>

Then you need to need to animate your images to move, you can use animate.css to your images. View the source code on GitHub here. In the README file he explains it how to use it!

#left {
  position: absolute;
  float: left;
}

#right {
  float: right;
}


.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  -moz-animation-name: fadeOutDown;
  animation-delay: 2s;
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  -moz-animation-name: fadeOutUp;
  animation-delay: 2s;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">

<div id="left">
	<img src='https://cdn.abraham.gq/stackoverflow/48027310/left.png' class="animated fadeOutDown" >
	<div id = "right">
		<img src='https://cdn.abraham.gq/stackoverflow/48027310/right.png'  class="animated fadeOutUp" >
	</div>
</div>