<div class="header-section">
</div>

<div class="square">
  <div class="hover-image">
   <img src="http://lorempixel.com/output/food-q-c-200-200-2.jpg" />
  </div>
  <div class="hover-text">
    This is sample text right here.
  </div>
  <div class="hover-arrow"></div>
  <img src="http://lorempixel.com/output/food-q-c-200-200-2.jpg" />
</div>

<div class="square">
  <div class="hover-image">
   <img src="http://lorempixel.com/output/food-q-c-200-200-2.jpg" />
  </div>
  <div class="hover-text">
    This is sample text right here.
  </div>
  <div class="hover-arrow"></div>
  <img src="http://lorempixel.com/output/food-q-c-200-200-2.jpg" />
</div>

<div class="square">
  <div class="hover-image">
    <img src="http://lorempixel.com/output/food-q-c-200-200-2.jpg" />
  </div>
  <div class="hover-text">
    This is sample text right here.
  </div>
  <div class="hover-arrow"></div>
  <img src="http://lorempixel.com/output/food-q-c-200-200-2.jpg" />
</div>
.header-section {
  height: 100px;
  width: 100%;
  background: #ccc;
}

.square {
  width: 200px;
  height: 200px;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.hover-arrow {
  opacity: 0;
  z-index: 110;
  position: absolute;
  left: 90px;
  top: 90px;
  width: 20px;
  height: 20px;
  background-color: red;
}

.hover-image {
  width: 200px;
  height: 0px;
  margin-top: 100px;
  z-index: 100;
  position: absolute;
  opacity: 0;
}

.hover-text {
  position: absolute;
  z-index: 90;
  width: 200px;
  height: 0px;
  margin-top: 100px;
  font-family: 'Arial Black';
  background: #333;
  color: #fff;
  opacity: 0;
}
$(function() {
  $('.square').hover(
    function() {
      $(this).children('.hover-image').stop().show('fade', 100).animate({
        marginTop: '-100px',
        height: '200px',
        opacity: 1.0
      }, 300, 'swing');
      
      $(this).children('.hover-text').stop().show('fade', 100).animate({
        marginTop: '100px',
        height: '200px',
        opacity: 1.0
      }, 300, 'swing');
      
      $(this).children('.hover-arrow').stop().show('fade', 100).animate({
        opacity: 1.0
      }, 300, 'swing');
    },
    function() {
      $(this).children('.hover-image').stop().animate({
        marginTop: '100px',
        height: '0px',
        opacity: 0
      }, 300, 'swing', function(){
        $(this).hide('fade', 100);
      });
      
      $(this).children('.hover-text').stop().animate({
        marginTop: '100px',
        height: '0px',
        opacity: 0
      }, 300, 'swing', function(){
        $(this).hide('fade', 100);
      });
      
      $(this).children('.hover-arrow').stop().animate({
        opacity: 0
      }, 300, 'swing', function() {
        $(this).hide('fade', 100);
      });
   });
});
Run Pen

External CSS

  1. https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js