A Simple and Efficient Way to Showcase Product Details

There are many solutions to display an enlarged image on mouse over.

Whether heavy or lightweight, simple or complex to configure, these solutions enable you to provide your users with a detailed view of your images or products.

If you're a TwicPics Components user, there's no need to use third-party solutions or develop your own magnifier function anymore. The TwicImg component now comes with a built-in magnifier feature.

Let's see how to make use of this feature.

Display an image with TwicImg Component

The image used in this post is https://assets.twicpics.com/examples/shoes/brown-shoes.jpg (jpeg - 2400 x 1564 px - 315kB).

As a reminder, here is how to display an image with the TwicImg component :

import { TwicImg } from '@twicpics/components/react';
export const TwicZoom = () => {
  return (
    <main>
      <TwicImg
          src="shoes/brown-shoes.jpg"
          ratio="4/3" /* displays an image with an aspect ratio of 4/3 */
        />
    </main>
  )
}

Here we use the React version of TwicImg but you can of course do the same in the framework of your choice.

Activate the magnifier

To activate the magnifying glass function we just need to add the zoom property in our component call.

As simple as that:

import { TwicImg } from '@twicpics/components/react';
export const TwicZoom = () => {
  return (
    <main>
      <TwicImg
          src="shoes/brown-shoes.jpg"
          ratio="4/3" /* displays an image with an aspect ratio of 4/3 */
          zoom="2" /* enables zoom feature and sets the magnification factor */
        />
    </main>
  )
}

Here we have indicated that our enlarged image should be 2 times larger than the image normally displayed.

To see it in action, just move your mouse over the image to the right.

The magnified image benefits from all classical best practices already implemented with TwicImg component: it is lazy loaded and implements Low-Quality Image Placeholder (LQIP) technique, making it fast and efficient.

To go further

Style-Driven Approach

The zoom factor can be configured through the --twic-zoom CSS variable making it more flexible and customizable for responsive design.

For example, we can imagine that you want to propose a 3X zoom on small screens and a 2X zoom on slightly larger ones.

To do that, simply set zoom property to 'css' and add a new rule to your stylesheet.

As this:

import { TwicImg } from '@twicpics/components/react';
import './style.scss';
export const TwicZoom = () => {
  return (
    <main>
      <TwicImg
          className="style-driven" /* drives responsive design */
          src="shoes/brown-shoes.jpg"
          zoom="css" /* enables style driven zoom */
        />
    </main>
  )
}

/** style.scss */
.style-driven {
  --twic-ratio: calc(4 / 3); /* displays an image with an aspect ratio of 4/3 */
  --twic-zoom: 3; /* sets zoom factor to 3 */
}

@media (min-width: 640px) {
  .style-driven {
    --twic-ratio: calc(16 / 9); /* displays an image with an aspect ratio of 16/9 */
    --twic-zoom: 2; /* sets zoom factor to 2 */
  }
}

What about other features of TwicImg?

For now, the only restriction to the use of the magnifier function is that it does not apply to images when set to mode="contain. For the rest, you can use any of the properties exposed by TwicImg.

For example, you can use preTransform prop in order to change the background color of your asset like in:

  <TwicImg
    className="style-driven" /* drives responsive design */
    src="shoes/brown-shoes.jpg"
    preTransform="background=remove+green.25" /* removes background and replaces by a green with alpha=25% */
    zoom="css" /* enables style driven zoom */
  />

Here is a StackBlitz that demonstrates the style-driven approach coupled with the use of preTransform property:

Best practice

The risk of displaying a magnified version larger than the master image itself increases with the value of the zoom factor.

We therefore recommend checking that your zoom factors are compatible with your master images intrinsics dimensions.

You can also prevent any form of upscaling by using the intrinsic property as in:

import { TwicImg } from '@twicpics/components/react';
export const TwicZoom = () => {
  return (
    <main>
      <TwicImg
          src="shoes/brown-shoes.jpg"
          intrinsic="2400x1564" /* avoids potential upscaling by setting intrinsic dimensions of the master image*/
          ratio="4/3" /* displays an image with an aspect ratio of 4/3 */
          zoom="2" /* enables zoom feature and sets the magnification factor */
        />
    </main>
  )
}

Conclusion

Since version 0.16.1, the TwicImg component includes a magnifier function.

The magnified image implements LQIP and is lazy loaded, so it only loads when the user's mouse is over it. These features ensure that loading times and website performance are not affected by the magnifier.

Configuring this magnifier is incredibly simple: all that is required is to set a value for the zoom property.

Particularly relevant to responsive design, the magnification value can also be set through a CSS variable.

To discover more features of TwicPics Components feel free to visit our live demos. You will find other examples of the magnifier like here in its React version.

TwicPics Components are free and open-source. Don't hesitate to test them for yourself. The only requirement to use them is to have a TwicPics account. If you don't already have one, you can easily create your own TwicPics account for free.

Finally, do not hesitate to send us your feedback or proposals. These components are yours.