responsive image with zoomed image on hover.
demo (ctrl+click to open in new tab)
this vue.js component displays an image with the width of the parent element and on hover shows the full image or a scaled image in the image area
zoomOnHover.js registers the vue component and defines zoomOnHover, a variable for the component configuration object.
zoomOnHover.css contains the needed styles
minimal example (with an example div as parent container)
<div style="width:400px"> <zoom-on-hover img-normal="image.jpg"></zoom-on-hover> </div>
<zoom-on-hover img-normal="image.jpg" img-zoom="bigger-image.jpg" :scale="1.5" :disabled="true" @loaded="onload" @resized="onresize"></zoom-on-hover>
- 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)
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)
- support for touch devices