How to create an aware direction hover effect with css and javascript.

The following code will create a nice hover effect when you put the cursor on the gallery thumbnail.

To achieve this effect you need an overlay which will stay in the top left corner, when the cursor will go inside the thumbnail, we will animate the overlay situated on the top corner.

HTML:

<a href="" class="popup">
            <div class="item background wow animated fadeInUp">
              <span class="item_inner_bg background" style="background:url(img path here)"></span>
              <div class="animated_bg"></div>
            </div>
          <img src="img path here">
          </a>

The following code is for direction aware effect:

jQuery(' #gallery .item ').each( function() { jQuery(this).hoverdir(); } );

To implement the gallery we will use magnific pop up jquery plugin.

jQuery('#gallery').magnificPopup({
    delegate: 'a',
    type:'image',
     gallery:{
        enabled:true,
        navigateByImgClick: true
     }
  });

The last part of the tutorial is represented by the css code:

.gallery_section{
  padding-top:0;
  padding-bottom:0;
}
.gallery_section img{
  display:none;
}
.gallery_section:after{
  content:"";
  clear:both;
  display:block;
}
.animated_bg{
  position:absolute;
  left:-100%;
  top:-100%;
  background-color: rgba(0,100,36,0.8);
  width:100%;
  height:100%;
  z-index:9;
}
.gallery_section .item_inner_bg{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  -webkit-transition:all 0.3s ease-out;
  -moz-transition:all 0.3s ease-out;
  -ms-transition:all 0.3s ease-out;
  -o-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out;
}
.gallery_section .item:after{
  content:"\f06e";
  position:absolute;
  left:50%;
  top:50%;
  font-family:FontAwesome;
  color:#fff;
  font-size:24px;
  z-index:99;
  -webkit-transform:translateX(-50%) translateY(-50%);
  -moz-transform:translateX(-50%) translateY(-50%);
  -ms-transform:translateX(-50%) translateY(-50%);
  -o-transform:translateX(-50%) translateY(-50%);
  transform:translateX(-50%) translateY(-50%);
  opacity:0;
  -webkit-transition:all 0.3s ease-out;
  -moz-transition:all 0.3s ease-out;
  -ms-transition:all 0.3s ease-out;
  -o-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out;
}
.gallery_section .item:hover:after{
  opacity:1;
}
.gallery_section .item:hover .item_inner_bg{
  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
  -ms-transform:scale(1.2);
  -o-transform:scale(1.2);
  transform:scale(1.2);
}
.gallery_section > a{
  width:25%;
  float:left;
}
.gallery_section .item{
  height:300px;
  position:relative;
  overflow:hidden;
}
@media all and (max-width:1100px){
  .gallery_section > a{
    width:33.33%;
  }
}
@media all and (max-width:800px){
  .gallery_section > a{
    width:50%;
  }
}
@media all and (max-width:640px){
  .gallery_section .item{
    height:250px;
  }
}
@media all and (max-width:480px){
  .gallery_section > a{
    width:100%;
  }
}

You can see the working example below.