# Magnify preview image on hover

**URL:** <https://community.elfsight.com/t/magnify-preview-image-on-hover/106143>\
**Category:** Customization\
**Tags:** file-embed\
**Created:** [March 10, 2025, 4:56pm UTC](https://community.elfsight.com/t/magnify-preview-image-on-hover/106143 "2025-03-10T16:56:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manish\_Gupta](https://avatars.discourse-cdn.com/v4/letter/m/958977/32.png) [@Manish\_Gupta](https://community.elfsight.com/u/Manish_Gupta)\
**Post date:** [March 10, 2025, 4:56pm UTC](https://community.elfsight.com/t/magnify-preview-image-on-hover/106143/1 "2025-03-10T16:56:18Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 11, 2025, 3:10pm UTC](https://community.elfsight.com/t/magnify-preview-image-on-hover/106143/3 "2025-03-11T15:10:34Z")

</div>

Hi there, @Manish_Gupta 👋

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 12, 2025, 11:33am UTC](https://community.elfsight.com/t/magnify-preview-image-on-hover/106143/4 "2025-03-12T11:33:49Z")

</div>

Thank you for waiting!

Here is the code from the dev team:

```auto
.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 🙂

---

<div class="post-metadata">

**Author:** ![Manish\_Gupta](https://avatars.discourse-cdn.com/v4/letter/m/958977/32.png) [@Manish\_Gupta](https://community.elfsight.com/u/Manish_Gupta)\
**Post date:** [March 14, 2025, 2:21am UTC](https://community.elfsight.com/t/magnify-preview-image-on-hover/106143/5 "2025-03-14T02:21:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 14, 2025, 10:36am UTC](https://community.elfsight.com/t/magnify-preview-image-on-hover/106143/6 "2025-03-14T10:36:41Z")

</div>

Hi there, @Manish_Gupta 👋

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 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 14, 2025, 2:27pm UTC](https://community.elfsight.com/t/magnify-preview-image-on-hover/106143/7 "2025-03-14T14:27:56Z")

</div>

Here is the adjusted code:

```auto
.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 🙂

---

<div class="post-metadata">

**Author:** ![Manish\_Gupta](https://avatars.discourse-cdn.com/v4/letter/m/958977/32.png) [@Manish\_Gupta](https://community.elfsight.com/u/Manish_Gupta)\
**Post date:** [March 14, 2025, 7:54pm UTC](https://community.elfsight.com/t/magnify-preview-image-on-hover/106143/8 "2025-03-14T19:54:19Z")

</div>

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!!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 17, 2025, 10:08am UTC](https://community.elfsight.com/t/magnify-preview-image-on-hover/106143/9 "2025-03-17T10:08:05Z")

</div>

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