Vue Image zoom on hover

In this post I am going to share Vue image zoom component on hover it also support touch devices. so you can implement this image zoom component for touch devices as well. whenever you mouse hover on image it’ll zoom the image under div container. it’ll not zoom the whole image it zoom the hovered area as you can see in demo there are two types of zoom one is normal and second is double zoom which you can implement on your product page.


Vue Image zoom on hover

files

zoomOnHover.js registers the vue component and defines zoomOnHover, a variable for the component configuration object. zoomOnHover.css contains the needed styles

usage

minimal example (with an example div as parent container)

<div style="width:400px">
  <zoom-on-hover img-normal="image.jpg"></zoom-on-hover>
</div>

all options

<zoom-on-hover img-normal="image.jpg" img-zoom="bigger-image.jpg" :scale="1.5" :disabled="true"
  @loaded="onload" @resized="onresize"></zoom-on-hover>


features

  • enabled/disabled property
  • custom scale for zoomed image
  • optionally a separate zoom image
  • event when all images loaded
  • event when images resized (responsive css, etc)

caveats

if the parent container is bigger than the source image, the normal image stretches to the size of the parent container but the zoom image will have the original width (will be smaller for example)

possible enhancements

  • support for touch devices

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by Intera. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.