<div class="c_image">
  <div class="c_image_wrapper">
    <img src="http://www.measuringu.com/images/timeline-horizontal-web-small.jpg" />
  </div>
  <div class="c_image_wrapper_action">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-search fa-stack-1x fa-inverse"></i>
    </span>
    <span class="c_image_wrapper_action_txt">Zoom on<span>
  </div>
</div>

body{
  padding: 0 !important;
  margin: 0 !important;
  background: #000;
  font-family: 'Roboto', sans-serif;
}

$size: 100%;

.c_image{
  width: $size;
  height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
  position:relative;
  .c_image_wrapper{
    height: 100vh;
    overflow-y: hidden;
    position:relative;
    img{
      position:absolute;
      height: 100%;
      width: auto !important;
      transition: all 0.5s ease-in-out;
    }  
    &.zoom{
      overflow-y: auto !important;
      img{
        height: 760px !important;
      }
    }
  }
  .c_image_wrapper_action{
    position:fixed;
    bottom: 0;
    margin: 10px 10px 10px 0px;
    background: #fff;
    padding: 5px 10px 5px 5px;
    border-radius: 10px;
    transform: scale(0.7,0.7);
  }
}

var elem_wrapper  = $('.c_image_wrapper'),
    icon          = $('.c_image_wrapper_action i'),
    icon_text     = $('.c_image_wrapper_action_txt');

icon.on('click', function(){
  elem_wrapper.toggleClass( "zoom" );
  if (icon_text.text() == "Zoom off"){
    icon_text.text("Zoom on")
  }else{
    icon_text.text("Zoom off");
  }
});