Hover con lupa sobre fotos

//Hover con lupa sobre fotos

Hover con lupa sobre fotos: Código jQuery

jQuery( document ).ready(function($) {

  $('.imghover').hover(
      function() {
          $(this).find('img').before('<div class="capahover" style="height:' + $(this).height() + 'px; width:' + $(this).width() + 'px"></div>');
          
          var mitadancho = ($(this).width() / 2) - 30;
          var mitadalto = ($(this).height() / 2) - 30;
          
          $('.capahover').css({'background-position-x': mitadancho, 'background-position-y': mitadalto});
          
      },
      function() {
          $('.capahover').remove();
      }
  );

});

Hover con lupa sobre fotos: CSS

a.imghover {
    float: left;
    margin: 0 10px 10px 0;
}
.capahover{
    background-color: rgba(0, 0, 0, 0.56);
    position: absolute;
    background-image: url('http://mujerescomotu.dorsia.es/wp-includes/images/lupa.png');
    background-repeat: no-repeat;
    box-shadow: inset 0 0 120px #000;
}

Hover con lupa sobre fotos: HTML

<a class="imghover" href="#"><img src="ruta_img_1.jpg" alt="01" width="460" height="262" /></a>

<a class="imghover" href="#"><img src="ruta_img_2.jpg" alt="02" width="460" height="262" /></a>

<a class="imghover" href="#"><img src="ruta_img_3.jpg" alt="03" width="460" height="262" /></a>

Ejemplo:

Escribe tu comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies