Hover con lupa sobre fotos: HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Crear tabs con jQuery</title>
<link rel="stylesheet" href="css/styles.css" />
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div class="content">
<h1>Crear tabs con jQuery</h1>
<a class="imghover" href="#"><img src="img/1.jpg" alt="01"></a>
<a class="imghover" href="#"><img src="img/2.jpg" alt="02"></a>
<a class="imghover" href="#"><img src="img/3.jpg" alt="03"></a>
</div>
</body>
</html>
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;
width:460px;
height:260px;
margin:0;
overflow:hidden;
}
.capahover {
background-color: rgba(0, 0, 0, 0.56);
position: absolute;
background-image: url('../img/lupa.png');
background-repeat: no-repeat;
box-shadow: inset 0 0 120px #000;
}
Descargar Hover con lupa sobre fotos con jQuery
¿Cómo personalizar el tamaño y estilo de la lupa?
El efecto de lupa se adapta automáticamente al tamaño del contenedor, pero puedes modificar su apariencia editando los valores CSS. Cambia el `box-shadow` para ajustar la intensidad del sombreado interior, aumenta o disminuye los píxeles para más o menos oscuridad. También puedes reemplazar la imagen `lupa.png` por un icono diferente o un símbolo Unicode como ⚲ usando `content` en pseudoelementos.
La opacidad del fondo se controla con `rgba(0, 0, 0, 0.56)`. Aumenta el último número hacia 1 para hacerlo más oscuro, o redúcelo para mayor transparencia. Si deseas cambiar el color base, reemplaza los tres ceros de RGB por otros valores. Prueba en navegador y ajusta hasta lograr el contraste visual que necesites.
¿Qué navegadores soportan este efecto de hover?
Este código funciona en todos los navegadores modernos que soporten jQuery y propiedades CSS3 como `box-shadow`, `rgba` y `background-position`. Chrome, Firefox, Safari, Edge y Opera lo renderizan correctamente sin problemas. Si necesitas compatibilidad con versiones muy antiguas de Internet Explorer, considera usar librerías de polyfill o versiones simplificadas sin efectos avanzados.
Prueba siempre en diferentes dispositivos y tamaños de pantalla, ya que en móviles el hover no funciona de la misma manera. Para esos casos, considera usar eventos `click` o `touch` como alternativa, o usa bibliotecas modernas como Swiper en lugar de jQuery puro.
¿Cómo agregar animación suave al mostrar y ocultar la lupa?
Reemplaza el `.remove()` por `.fadeOut()` para desvanecer la lupa gradualmente. Agrega transiciones CSS en la clase `.capahover` con `transition: opacity 0.3s ease-in-out;` y modifica la opacidad en lugar de eliminar el elemento. Esto crea una experiencia visual más pulida que desapariciones abruptas, mejorando la percepción de calidad.
También puedes animar la posición del fondo con `transition: background-position 0.2s ease;`. Así, cuando el usuario mueva el cursor, la imagen zoom seguirá el movimiento de forma más natural. Experimenta con duraciones entre 0.2s y 0.5s según prefieras velocidad o suavidad.
