I want to make an effect like the one in this Wordpress theme:
In the section where there is as a gallery of images and says things like "on the mountains", "take a flight", "a night to remember", etc. when you hover with the mouse on each image, there is a small displacement that resides as one moves the mouse.
How can I do this?
This code snippet is from the site codepen of the author:
Krz Szzz / Zoom + pan the image on hover & mouse move
I have modified the code: removing the text above and let them all climb in the same 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>There is a way to do it, much simpler and more efficient, and it is using the benefits of the 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>