kirigosh

<div id="mono">
  <input type="checkbox" name="image" id="tonggle" />
  <label for="tonggle">
    <img src="http://wikipics.net/photos/20150206142322639625248.jpg" >
  </label>
  <div id="tex">Praesent sodales suscipit eros ut tempor. Curabitur pulvinar lectus ut enim gravida dictum. Vivamus eget nunc diam. Donec nec risus dictum, ullamcorper erat non, rutrum purus. Mauris lacus nibh, ornare sit amet ipsum et, rutrum sagittis tellus. Cras tincidunt facilisis facilisis. Cras lectus elit, efficitur at est nec, dictum gravida diam. Praesent eget ex porttitor nisi egestas commodo placerat vel eros. Nam sed justo congue, lobortis felis quis, fermentum massa. Donec egestas faucibus magna vitae maximus. Integer non facilisis dolor. Maecenas posuere elit ut magna bibendum, sit amet iaculis justo tempus. Vivamus vulputate eu neque quis hendre</div>
</div>

#mono {
  width: 500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
#mono label {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  z-index: 2;
  position: relative;
}
#mono input {
  position: absolute;
  left: -9999px;
}
#mono input:checked + label img {
  -webkit-transform: translate(0, -350px);
      -ms-transform: translate(0, -350px);
          transform: translate(0, -350px);
}
#mono #tex {
  position: absolute;
  padding: 20px;
  z-index: 1;
  top: 0;
  left: 0;
}
#mono img {
  width: 500px;
  position: relative;
  -webkit-transition: -webkit-transform 1s;
          transition: transform 1s;
}

<div id="mono">
    <img src="http://i.stack.imgur.com/IehB7.png" />
</div>
<div id="tex">blablabla</div>

margin: 10px;
position: absolute;
z-index: -1;