<!-- 
autor: Marco Barría 
https://twitter.com/marco_bf
-->

<div class="container-fluid">
  <div id="content" class="row"></div>
</div>

<script id="template" type="text/x-handlebars-template">
  {{#gallery}}
    <div class="col-md-4 col-lg-3 col-xs-6 item nopadding">
      <div class="overflow">
        <div class="content-art">
          <h4>{{title}}</h4>
        </div>
        <img src="{{img}}" alt="{{alt}}" class="img-responsive"/>
      </div>
    </div>
  {{/gallery}}
</script>

@import url(https://fonts.googleapis.com/css?family=Ubuntu:700);

.item {
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  &:hover > .overflow > .content-art {
    transform: translateY(0) translateZ(0);
  }
}

.overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.content-art {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
  color: #fff;
  font-weight: 700 !important;
  text-align: center;
  text-shadow: 0 1px 1px #000;
  padding: 10px 15px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 100;
  -webkit-backface-visibility: hidden;
  transform: translateY(100%) translateZ(0);
  transition: transform 450ms ease-out;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

body {
  background: #1f253d;
  font-family: 'Ubuntu', sans-serif;
}

$(document).ready(function() {
  
  var data = { gallery: [
    {title: "Ella me quiso, a veces yo también la quería", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/murra.jpg", alt: "lorem" },
    {title: "Puedo escribir los versos más tristes esta noche", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g1.jpg", alt: "lorem" },
    {title: "Mi voz buscaba el viento para tocar su oído", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g2.jpg", alt: "lorem" },
    {title: "Mi alma no se contenta con haberla perdido", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g3.jpg", alt: "lorem" },
    {title: "El viento de la noche gira en el cielo y canta", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g4.jpg", alt: "lorem" },
    {title: "La noche está estrellada, y tiritan, azules, los astros, a lo lejos", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g5.jpg", alt: "lorem" },
    {title: "Cómo no haber amado sus grandes ojos fijos", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g6.jpg", alt: "lorem" },
    {title: "De otro. Será de otro. Como antes de mis besos.", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g7.jpg", alt: "lorem" }
  ]};
  
  var source   = $('#template').html();
  var template = Handlebars.compile(source);
  $('#content').html(template(data));
  
});

$(window).load(function(){
  var $items = $('.item');
  $items.on({
    mousemove: function(e) {
      var $that = $(this);
      $that.find('.overflow > img').velocity({
        translateZ: 0,
        translateX: Math.floor((e.pageX - $that.offset().left) - ($that.width() / 2)),
        translateY: Math.floor((e.pageY - $that.offset().top) - ($that.height() / 2)),
        scale: '2'
      }, {
        duration: 400,
        easing: 'linear',
        queue: false
      });
    },
    mouseleave: function() {
      $(this).find('.overflow > img').velocity({
        translateZ: 0,
        translateX: 0,
        translateY: 0,
        scale: '1'
      }, {
        duration: 1000,
        easing: 'easeOutSine',
        queue: false
      });
    }
  });
});