What we did

May 2023 : This month we delved into image rollover.

One of our members was interested in how ebay made the photos of the goods inlarge when you rolled your mouse over them. Here's what we found out.

There are two ways this appears to be achieved with CSS and a combination of CSS and JavaScript.  We had a look at W3Docs which had lots of examples of pure CSS zoom effects and CSS Scripts which had examples using both CSS and JavaScript. Now I have little knowledge of JavaScript so I won’t go into how the JavaScript examples work but CSS Script had some great examples.

The CSS appears to come down to three properties, also I think we may find we could use animation. 

1.      Transition,

2.      Transform and

3.      Scale.

We looked at a number of examples and here are a few we used.

The first one had three images which when hovered over the image enlarged. This one had transform using scale to calculate the size of the increase.

This is the original demo from the w3docs article.

The photos were contained within a UL list, when you hover on them they increased in size by 1.5 %.

This is the CSS class.

ul li:hover img {

        transform: scale(1.5);

        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

      }

and this is our test page.

How does transform work? Here is a what MDN Web Docs says.

““The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS”

The next one we looked at was an example of creating a zoom-in effect with slow-motion on hover:

This time the single image was contained within a div with a class content. This is the original demo from the w3docs article.

Here the CSS included

.content img {

        max-width: 100%;

        transform-origin: 65% 75%; /* this positions the image on the X (up) Y (side) axis. */

        transition: transform 1s, filter .5s ease-out; /* This determines 1. The speed of the transform 2. the speed and the of the ease-out. */

      }

      /* The Transformation */

      .content:hover img {

        transform: scale(5);

      }

This is our test page.

The last example is from CSS Scripts and contains examples of JavaScript.

Here the image is set in a CSS ID selector of container.

Note, to quote MDN Web Docs

“The element on the page with the specified ID. On a given HTML page, each id value should be unique.” In essence that means you can use a number of IDs but each one must have a unique name and only used once on the page.

The main JavaScript in this page is a link in the header, I won’t go into the JavaScript. It called "script.js" which looks like this.

const container = document.getElementById("container");

const img = document.querySelector("img");

container.addEventListener("mousemove", onZoom);

container.addEventListener("mouseover", onZoom);

container.addEventListener("mouseleave", offZoom);

function onZoom(e) {

    const x = e.clientX - e.target.offsetLeft;

    const y = e.clientY - e.target.offsetTop;

    // console.log(x, y)

    img.style.transformOrigin = `${x}px ${y}px`;

    img.style.transform = "scale(2.5)";

}

function offZoom(e) {

    img.style.transformOrigin = `center center`;

    img.style.transform = "scale(1)";

}

Now if I understand this correctly you use a unique ID so the script’s “getElemantById” method can work its magic on that element. Again, to quote MDN “Note: IDs should be unique inside a document. If two or more elements in a document have the same ID, this method returns the first element found.”

Here is the original demo.

and our test page.

Steve South

Web Design leader