Efecto hover con Jquery y CSS3

... direction-aware hover effect using CSS3 and jQuery ... difícil de traducir; pero digamos que dada una serie de rectángulos con imagenes, al poner el puntero del ratón encima de cada uno de ellos, se mostrará un texto superpuesto que aparecerá mediante una transición cuya dirección varia según donde estemos ... y como mi intento de explicarlo es más confuso que el original en inglés, mejor, veamos el ejemplo y listo:

• 
  Gira, gira y gira hasta destrabar las piezas y dejar salir la luz de estos laberintos.
• 
  El juego perfecto para destrozar un teclado y los nervios de cualquiera.
• 
  Encuentra el camino más adecuado para dar energía a todas las pirámides.
• 
  Una chica, un chico Hay que reunirlos para darle un final feliz a esta historia de amor.
• 
  Dispara a los muñecos con el cañón hasta hacer caer la plataforma y su contenido.
• 
  En el mundo de los robots, un accidente ha afectado al generador principal de energía.
• 
  na simulación del conocido juego en su versión para Flash. Difícil, difícil, difícil.
• 
  Hay que ser veloz con el ratón y ver si podemos resolver el juego.
• 
  Estructuras en equilibrio a las que hay que derribar utilizando el mouse y ... destreza.

Bien, de eso se trata así que veamos como se hace.

Requiere tres cosas, el CSS (funcionará sólo en navegadores que interpreten la propiedad transition), un script que funciona con jQuery y el HTML que no es otra cosa que una lista.

Empezamos con el HTML, como dije, una lista (etiqueta UL) donde cada item (etiqueta LI) contiene un enlace con una imagen que es la que veremos por defecto y un DIV con un texto que es el que se verá al poner el puntero del cursor encima:

<ul id="da-thumbs" class="da-thumbs">
  <li>
    <a href="url_enlace" target="_blank">
      <img src="url_imagen" />
      <div>
        <span>el texto a mostrar</span>
      </div>
    </a>
  </li>
  <!-- ... y seguimos agregando imágenes y textos con la misma estructura -->
</ul>

Debajo de eso, colocamos el llamado a la función:

<script type="text/javascript">
  $(function() {$('#da-thumbs > li').hoverdir();});
</script>

Y ahora, la función que podemos colocarla antes del </head> y que podemos descargar desde la página del desarrollador junto con los ejemplos.

(function( $, undefined ) {
  $.HoverDir = function( options, element ) {
    this.$el = $( element );
    this._init( options );
  };
  $.HoverDir.defaults = {hoverDelay : 0,reverse : false};
  $.HoverDir.prototype = {
    _init : function( options ) {
      this.options = $.extend( true, {}, $.HoverDir.defaults, options );
      this._loadEvents();
    },
    _loadEvents : function() {
      var _self = this;
      this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
        var $el = $(this),
          evType = event.type,
          $hoverElem = $el.find( 'div' ),
          direction = _self._getDir( $el, { x : event.pageX, y : event.pageY }),
          hoverClasses= _self._getClasses( direction );
        $hoverElem.removeClass();
        if( evType === 'mouseenter' ) {
          $hoverElem.hide().addClass( hoverClasses.from );
          clearTimeout( _self.tmhover );
          _self.tmhover = setTimeout( function() {
            $hoverElem.show( 0, function() {$(this).addClass( 'da-animate' ).addClass( hoverClasses.to );});
          }, _self.options.hoverDelay );
        } else {
          $hoverElem.addClass( 'da-animate' );
          clearTimeout( _self.tmhover );
          $hoverElem.addClass( hoverClasses.from );
        }
      });
    },
    _getDir : function( $el, coordinates ) {
      var w = $el.width(),
        h = $el.height(),
        x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
        y = ( coordinates.y - $el.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
        direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 )  % 4;
      return direction;
    },
    _getClasses      : function( direction ) {
      var fromClass, toClass;
      switch( direction ) {
        case 0:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromTop' : fromClass = 'da-slideFromBottom';
          toClass = 'da-slideTop';
          break;
        case 1:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromRight' : fromClass = 'da-slideFromLeft';
          toClass = 'da-slideLeft';
          break;
        case 2:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromBottom' : fromClass = 'da-slideFromTop';
          toClass = 'da-slideTop';
          break;
        case 3:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromLeft' : fromClass = 'da-slideFromRight';
          toClass = 'da-slideLeft';
          break;
      };
      return { from : fromClass, to: toClass };
    }
  };
  var logError = function( message ) {if ( this.console ) {console.error( message );}};
  $.fn.hoverdir = function( options ) {
    if ( typeof options === 'string' ) {
      var args = Array.prototype.slice.call( arguments, 1 );
      this.each(function() {
        var instance = $.data( this, 'hoverdir' );
        if ( !instance ) {
          logError( "cannot call methods on hoverdir prior to initialization; " + "attempted to call method '" + options + "'" );
          return;
        }
        if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
          logError( "no such method '" + options + "' for hoverdir instance" );
          return;
        }
        instance[ options ].apply( instance, args );
      });
    }  else {
      this.each(function() {
        var instance = $.data( this, 'hoverdir' );
        if ( !instance ) {
          $.data( this, 'hoverdir', new $.HoverDir( options, this ) );
        }
      });
    }
    return this;
  };
})( jQuery );

Y por último, la clave, como siempre, es el CSS que agregamos donde más nos guste:

<style>
  .da-thumbs {margin: 0 !important}
  .da-thumbs li { /* cada item */
    background: #FFF; /* color de fondo para el borde */
    float: left;
    margin: 5px; /* separación entre items */
    padding: 8px; /* padding como borde */
    position: relative;
  }
  .da-thumbs li a, .da-thumbs li a img {
    display: block;
    height: 137px; /* el alto de la imagen */
    position: relative;
    width: 185px; /* el ancho de la imagen */
  }
  .da-thumbs li a {overflow: hidden;}
  .da-thumbs li a div { /* el contenedor de los textos */
     background: rgba(75,75,75,0.7); /* un poco de opacidad */
     height: 100%;
     position: absolute;
     width: 100%;
  }
  .da-thumbs li a div span { /* el texto en si mismo */
    color: #FFF;
    display: block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin: 15px 10px;
    padding: 10px 0;
    text-align: center;
  }
  .da-thumbs li a div.da-animate { /* la animación del hover */
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  /* la posición inicial de los textos ocultos */
  .da-slideFromTop {left: 0; top: -100%;}
  .da-slideFromBottom {left: 0; top: 100%;}
  .da-slideFromLeft {top: 0; left: -100%;}
  .da-slideFromRight {top: 0; left: 100%;}
    /* la posición final */
  .da-slideTop {top: 0;}
  .da-slideLeft {left: 0;}
</style>

REFERENCIAS:codrops