2

Quiero hacer un efecto como el que tiene este theme de Wordpress:

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

En la sección donde hay como una galería de imágenes y dice cosas como "on the mountains", "take a flight", "a night to remember", etc.. cuando se hace hover con el mouse sobre cada imagen, hay un pequeño desplazamiento que resonde a como uno mueva el mouse.

¿Cómo puedo hacer esto?

2 respuestas 2

5

Este fragmento de código, es del sitio codepen del author:

Krz Szzz / Zoom + pan the image on hover & mouse move

He modificado el código: quitando el texto encima y que escalen todos en las mismas dimension.

$('.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>

1
  • 1
    Lo hice y me funcionó, gracias. brauli.cl Commented el 9 nov. 2016 a las 16:49
0

Hay una forma de hacerlo, mucho más simple y eficiente, y es usando las bondades del 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.sstatic.net/UmOcd.png">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/PF6aN.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/x4kFg.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/DDWHD.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/wl4Fq.jpg">
  </div>
</div>

2
  • 2
    Pero no se mueve la imagen con el ratón, ese es el efecto que quiere saber el OP Commented el 7 nov. 2016 a las 9:42
  • Gracias por el dato, pero no es lo que estoy buscando. Lo que yo necesito no es que se agrande la foto, sino que se pueda mover con el mouse. Commented el 8 nov. 2016 a las 19:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.