Estoy tratando de hacer zoom dentro de una imagen que está dentro de un div
, todo esto ya lo conseguí pero al hacer hover
sobre la imagen solo me da un zoom general y a mi me gustaría que cuando mueva el mouse sobre la imagen el zoom se mueva hacía donde lo dirijo, esto es lo que tengo.
Voy a hacer algunos cambios, tengo el problema de el div no aparece, checando las herramientas de red, puedo ver que la imagen la recibo con status 200, pero no aparece en mi vista.
$(document).ready(function() {
$('.tile')
// tile mouse actions
.on('mouseover', function() {
$(this).children('.photo').css({
'transform': 'scale(' + $(this).attr('data-scale') + ')'
});
})
.on('mouseout', function() {
$(this).children('.photo').css({
'transform': 'scale(1)'
});
})
.on('mousemove', function(e) {
$(this).children('.photo').css({
'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 + '%'
});
})
// tiles set up
.each(function() {
$(this)
// add a photo container
.append('<div class="photo"></div>')
// some text just to show zoom level on current item in this example
.append('<div class="txt"><div class="x">' + $(this).attr('data-scale') + 'x</div>ZOOM ON<br>HOVER</div>')
// set up a background image for each tile based on data-image attribute
.children('.photo').css({
'background-image': 'url(' + $(this).attr('data-image') + ')'
});
});
});
.tiles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tile {
position: relative;
float: left;
width: 33.333%;
height: 100%;
overflow: hidden;
}
.photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: transform .5s ease-out;
}
.txt {
position: absolute;
z-index: 2;
right: 0;
bottom: 10%;
left: 0;
font-family: 'Roboto Slab', serif;
font-size: 9px;
line-height: 12px;
text-align: center;
cursor: default;
}
.x {
font-size: 32px;
line-height: 32px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tiles">
<div class="tile" data-scale="2.4" width="100%" data-image="https://lorempixel.com/400/800"></div>
</div>