Cacher is the code snippet organizer for pro developers

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: white;
  background-color:#333;
}
section#image {
  position:absolute;
  left:-25px;
  opacity:0;
}
section#caption h1{
  position:absolute;
  top:15px;
  left:-15px;
  width:3in;
  padding:24px;
  border-radius:5px;
  font-size:24px;
  font-weight:normal;
  text-align:center;
  background-color:#333;
  opacity:0;
  
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

$(function() {
  console.log("ready");
  //$('h1').hide();

  $(window).load(function() {
    $("section#image").animate(
      {
        left: '0px', // position must be absolute or relative in the css
        opacity: 1
      },
      1000,
      'swing'// add a callback function here to change opacity and left values to get a fade/slide effect over .75 second 
    );
      });
     
      

        


});

<section id="image">
  <img src="http://www.redrocketmedia.com/des157/images/mermaid.png" alt="mermaid">
</section>

<section id="caption">
  <h1>mermaids are real!</h1></section>