Вопросы Теги

Масштаб внутри img в div

Я стараюсь делать масштаб внутри изображения, которое внутри одного 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>
7
задан 16.08.2019, 07:02
0 ответов