Magnify preview image on hover

Ask the Community Customization
1

A lot of my preview images look the very similar, so it’s hard or my users to tell the difference even at maximum magnification. If the widget could magnify the image when a user hovers over it, that would be great! Thank you!

1 Like
3

Hi there, @Manish_Gupta :wave:

Your request is with our devs now, and I’ll report back once the solution is ready :slightly_smiling_face:

1 Like
4

Thank you for waiting!

Here is the code from the dev team:

.eapp-file-embed-item-blockLink,
.eapp-file-embed-item-component,
.eapp-file-embed-grid-component,
.eapp-file-embed-grid-layout-component {
  overflow: visible;
}

.eapp-file-embed-item-iconContainer {
  transition: scale 0.3s ease;
}

.eapp-file-embed-item-iconContainer:hover {
  scale: 1.1
}

Please add it to the Custom CSS field on the Appearance tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

2 Likes
5

Hi Max,

Thanks for the codes—it works! The only issue is I need the image much bigger, like maybe 3-4x bigger, for users to be able to clearly see the chart I’m trying to display. Can that be done by adjusting the scale settings?

Thanks!

Manish

2 Likes
6

Hi there, @Manish_Gupta :wave:

Surely, you can increase the scale value, but I see that other thumbnails are displayed on top of the hovered image. Our devs will adjust the code and I’ll let you know once it’s done :slightly_smiling_face:

7

Here is the adjusted code:

.eapp-file-embed-item-blockLink,
.eapp-file-embed-item-component,
.eapp-file-embed-grid-component,
.eapp-file-embed-grid-layout-component {
  overflow: visible;
}

.eapp-file-embed-item-iconContainer {
  transition: scale 0.3s ease;
}

.eapp-file-embed-item-iconContainer:hover {
  scale: 4;
  z-index: 444444;
}

Please try it out and let me know if you like the result :slightly_smiling_face:

2 Likes
8

Hey, this looks great—the only issue is the pop-up on hover isn’t showing above the other images, it’s showing behind the other thumbnails. Is there a way to fix that?

Actually, one more question. The pop-up image looks “greyed out” when I hover over it. Is there a way to not have the greyed-out effect?

Thanks!!

2 Likes
9

Could you please send me a link to the page where your widget is installed?