This code project enables a zoom and pan effect on images when hovering over them and moving the mouse. It utilizes HTML, CSS, and jQuery to achieve this functionality. The code defines a set of image tiles within a container, each having a different zoom scale and background image.
When the mouse hovers over a tile, the image within it is scaled up based on the specified zoom scale. As the mouse moves within the tile, the image pans accordingly, giving the illusion of interaction.
The code dynamically adds a photo container and text overlay to each tile, displaying the zoom level. This code is useful for enhancing user experience by providing an interactive and visually appealing way to view images on a website.
How to Create Zoom + Pan The Image On Hover & Mouse Move
1. First, let’s set up the HTML structure for our image tiles. We will use a <div> element with a class of “tiles” to contain our individual image tiles. Each tile will have a <div> element with a class of “tile”. Inside the tile, we will add a <div> element with a class of “photo” to hold the image and a <div> element with a class of “txt” for the zoom level text overlay.
<div class="tiles">
<div class="tile" data-scale="1.1" data-image="https://picsum.photos/1200/1200/?1"></div>
<div class="tile" data-scale="1.6" data-image="https://picsum.photos/1200/1200/?2"></div>
<div class="tile" data-scale="2.4" data-image="https://picsum.photos/1200/1200/?3"></div>
</div>
2. Next, let’s style the tiles and the image elements using CSS. We will set the position, dimensions, and appearance of the tiles and the image containers. We will also define the transition property for smooth animation effects.
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);
.cd__main {
position: relative;
min-height: 720px;
background: #fff;
color: #000;
margin: 0;
}
.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;
}
3. Now, load the jQuery library by adding the following CDN link just before closing the body element.
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
4. Finally, let’s add the jQuery code that enables the zoom and pan effect on the images. We will use jQuery’s event handlers to detect mouse actions such as hover, mouseout, and mousemove. Within these event handlers, we will update the transform and transform-origin CSS properties of the image containers to achieve the desired zoom and pan effect.
$('.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') +')'});
})
That’s all! hopefully, you have successfully created zoom + pan the image on hover & mouse move. If you have any questions or suggestions, feel free to comment below.
