Фотография фона, который двигается мышью hover

Я хочу сделать такой эффект как который у него есть этот theme Wordpress:

http://themenectar.com/demo/salient-frostwave/

В секции, где есть как галерея изображений и говорит вещи, как "on the mountains", "take в flight", "в night to remember", и т.д..., когда он делается hover мышью на каждом изображении, есть маленькое перемещение, которое он повторно зондировал бы в как один, двиньте мышь.

Как я могу делать это?

2
задан 06.11.2016, 19:17
2 ответа

Этот фрагмент cГіdigo, он сайта codepen из author:

Крс Сссс / Масштаб + хлеб the image on hover & мышь move

я изменил cГіdigo: снимая текст сверху, и что взобрались на все в самой размер.

$('.tile')
    // acción del ratón
    .on('mouseover', function(){
      // escala la foto pasando por encima
      $(this).children('.photo').css({ 'transform': 'scale('+ $(this).attr('data-scale') +')' }); 
     })
    .on('mouseout', function(){
      // escala la foto a su tamaño original al salir de ella
      $(this).children('.photo').css({ 'transform': 'scale(1)' }); 
     })
    .on('mousemove', function(e){
      // aquí es donde se "mueve la foto"
      $(this).children('.photo').css({ 'transform-origin': 
                                       ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
    })
    // crear el los contenidos para cada foto
    .each(function(){
  
      $(this)      
        // añadir contenedor para las fotos
        .append('<div class="photo"></div>')      
        // crear imagen de fondo para cada contenedor
        .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;
  }
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="tiles">
  <div class="tile" data-scale="1.2" data-image="http://lorempixel.com/200/200/food/"></div>
  <div class="tile" data-scale="1.2" data-image="http://lorempixel.com/200/200/sports/"></div>
  <div class="tile" data-scale="1.2" data-image="http://lorempixel.com/200/200/animals/"></div> 
</div>
5
ответ дан 24.11.2019, 12:43

Есть способ это делать, гораздо проще и работоспособнее, и - используя доброту css

.gallery {
  width: 100%;
}
.imgContainer {
  display: inline-block;
  background-color: black;
  height: 200px;
  width: 25%;
  overflow: hidden;
}

.hoverEffect {
  height: 100%;
  width: 100%;
  opacity: 0.6;
  transition: all 500ms;
}
.hoverEffect:hover {
  opacity: 1;
  transform: scale(1.1);
}
<div class="gallery">
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.stack.imgur.com/UmOcd.png">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.stack.imgur.com/PF6aN.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.stack.imgur.com/x4kFg.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.stack.imgur.com/DDWHD.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.stack.imgur.com/wl4Fq.jpg">
  </div>
</div>
0
ответ дан 24.11.2019, 12:43
  • 1
    Но не двигается изображение с rat и # 243; n, это эффект, который хочет узнать OP –  Black Sheep 07.11.2016, 11:42
  • 2
    Спасибо за информацию, но вот то, что я ищу. То, в чем я нуждаюсь, не состоит в том, чтобы увеличилась фотография, но будет возможно двигать мышью. –  Felipe Pino 08.11.2016, 21:06

Теги

Похожие вопросы