How to slide a div from bottom using pure css or pure javascript

Question

• So I have a image in background and an iframe effect showing an ad above. (Hopscotch one is an ad. The flower is the html image)
• All I am trying to do is to show that ad sliding up from the bottom of the background image. I tried many a things. In search of pure css or pure javascript solution.

The ad should slide from bottom of background image and then get fixed at position at which it is showing. Just a sliding effect from bottom till ad shows.

For example please check ad on this page:-

http://www.thenewsminute.com/article/united-states-south-india-can-southern-collective-get-us-better-deal-delhi-46501

Answer 1

i guess this is what you are looking for :

 
.container {
  position:relative;
  overflow:hidden;
  width:300px;
  height:200px;
}  
.img {
  width:100%;
  height:100%;
  background:blue;
}

.slidemeup{
  background:red;
  position:absolute;
  bottom:-50px;;
  height:50px;
  width:100%;
  left:0;
  animation-name:slideup;
  animation-delay:0.5s;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  animation-timing-function:ease-out;

  
}
@keyframes slideup {
  0%{bottom:-50px}
  100%{bottom:0;}
}

<div class="container">
<div class="img">

</div>
<div class="slidemeup">
SLIDE ME UP
</div>
</div>

i used a div with class img instead of the image. but it should work either way