Sliding up content is not working properly - html

Question

I am newbie in html and css. Trying to make a portion in my webpage, where i want some image and text to slide up side by side. I used html and css for that.
Here is the link for the code in JSFIDDLE:
Sliding up code
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% { top: 0%; }
20% { top: -0%; }
25% { top: -20%; }
45% { top: -25%; }
50% { top: -45%; }
70% { top: -50%; }
75% { top: -70%; }
95% { top: -75%; }
100% { top: -100%; }
}
/* Standard syntax */
#keyframes mymove {
0% { top: 0%; }
20% { top: -0%; }
25% { top: -20%; }
45% { top: -25%; }
50% { top: -45%; }
70% { top: -50%; }
75% { top: -70%; }
95% { top: -75%; }
100% { top: -100%; }
}
Actually its sliding up only the images not showing the text. But i need both.

Answer 1

Please check the updated code. Now it works fine.
#image_slider_right {
background-color: #CCFF00;
width: 50%;
float: left;
height: 250px;
margin: 50px 0 0 50px;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
top: 0%;
}
20% {
top: -0%;
}
25% {
top: -20%;
}
45% {
top: -25%;
}
50% {
top: -45%;
}
70% {
top: -50%;
}
75% {
top: -70%;
}
95% {
top: -75%;
}
100% {
top: -100%;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
top: 0%;
}
20% {
top: -0%;
}
25% {
top: -20%;
}
45% {
top: -25%;
}
50% {
top: -45%;
}
70% {
top: -50%;
}
75% {
top: -70%;
}
95% {
top: -75%;
}
100% {
top: -100%;
}
}
div#sliderup {
overflow: hidden;
position: relative;
height: 100%;
margin-left: 10px;
width: 98%;
}
div#sliderup figure .img_up {
width: 98%;
height: 100%;
float: left;
margin-bottom: 10px;
position: relative;
}
div#sliderup figure {
position: relative;
width: 98%;
margin: 0;
text-align: left;
animation: 20s mymove infinite;
}
.divimgslideup {
float: left;
width: 50%;
}
.divimgslideup_txt {
float: left;
width: 50%;
}
<div id="image_slider_right">
<div id="sliderup">
<figure>
<div class="img_up">
<div class="divimgslideup">
<img src="http://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" alt="" height="100px" width="100px">
</div>
<div class="divimgslideup_txt">
<strong>Make the Best Choice</strong>
<p>With 17 unique 1, 2 & 3 bedroom floor plans available, tap to find the</p>
</div>
</div>
<div class="img_up">
<div class="divimgslideup">
<img src="http://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" alt="" height="100px" width="100px">
</div>
<div class="divimgslideup_txt">
<strong>Get Comfortable</strong>
<p>Quality and exceptional value are foundations of our philosophy. Satisfaction with your home is our</p>
</div>
</div>
<figure>
</div>
</div>
</div>
Check the working code on JSFIDDLE