Generacionweb, Diseño web Valencia
contacto por teléfono
contacto por whatsapp
Generacionweb, Diseño web Valencia
Contactar

Hover con lupa sobre fotos con jQuery

Tabla de contenidos

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

Twitter Facebook Whatsapp Map-marker-alt
Jose Hilario
Jose Hilario
¡Apasionado del diseño web! Especializado en WordPress, WooCommerce y Elementor PRO. Me encanta diseñar páginas web atractivas y optimizadas para SEO. Mi objetivo: impulsar a las empresas con un diseño web atractivo y funcional.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías
Diseño web (72)
Inteligencia Artificial (4)
Plugins (5)
Promociones (4)
Tutoriales Wordpress (47)

¿Necesitas una web? Contacta con nosotros.

Contactar
Relacionados:
generaionweb
  • "El diseño no es solo lo que se ve y se siente. El diseño es cómo funciona." - Steve Jobs
Servicios
Nosotros
Generacionweb
655 35 74 30
Whatsapp
Twitter Facebook Whatsapp Map-marker-alt
🚀 Asesoría gratuita

¿Deseas una solución web a medida pero no sabes por dónde empezar? Déjanos tus datos y programaremos una reunión de 30 minutos para identificar la mejor solución para tu proyecto.

¡Quiero una asesoría!
Copyright © 2024 Generacionweb | Todos los derechos reservados.

Configuración de Cookies