Я стараюсь делать масштаб внутри изображения, которое внутри одного div
, все это уже я этого достиг, но сделав hover
на изображении только он дает мне общий масштаб и мне хотелось бы, что, когда он двинет мышь на изображении, масштаб двинулся, куда я этим руковожу, это - то, что у меня есть.
Я сделаю какие-то изменения, у меня будет проблема div он не появляется, проверяя сетевые программные средства, я могу видеть, что я получаю изображение со статусом 200, но он не появляется в моем виде.
$(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>