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;
}
