Hover con lupa sobre fotos con jQuery

Hover con lupa sobre fotos con jQuery

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


Deja un comentario

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