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:

Leave A Comment

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