# On mouse Hover Image Gallery

**URL:** <https://community.elfsight.com/t/on-mouse-hover-image-gallery/140308>\
**Category:** General Questions\
**Tags:** photo-gallery\
**Created:** [October 5, 2025, 6:34pm UTC](https://community.elfsight.com/t/on-mouse-hover-image-gallery/140308 "2025-10-05T18:34:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sheragim\_GHAEINI](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sheragim_ghaeini/32/79665_2.png) [@Sheragim\_GHAEINI](https://community.elfsight.com/u/Sheragim_GHAEINI)\
**Post date:** [October 5, 2025, 6:34pm UTC](https://community.elfsight.com/t/on-mouse-hover-image-gallery/140308/1 "2025-10-05T18:34:51Z")

</div>

Hello,  
Please create an app/add-on that gives the photo gallery on Google Sites a lively effect, so that (e.g.) when there is no mouse hovering, the photos are black and white and when the mouse hovers on a photo, it turns to color photo.  
Appreciate it fellas.

Regards  
Sheragim

---

<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:** [October 6, 2025, 6:25pm UTC](https://community.elfsight.com/t/on-mouse-hover-image-gallery/140308/3 "2025-10-06T18:25:50Z")

</div>

Hi there, @Sheragim_GHAEINI 👋

I’m not sure which widget is installed on your Google Sites website, but in your account I’ve found a Photo Gallery widget with Masonry layout and default photos there:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/0/e09341d7bf6d4171c8904ca7b4181beb566dfa5a.jpeg)

If you’re going to keep using the Masonry layout and the uploaded photos will be colored, this code will help you achieve the needed result:

```auto
.eapp-photo-gallery-masonry-item-item {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.eapp-photo-gallery-masonry-item-item:hover {
    filter: grayscale(0%);
}

```

  

It should be added to the **Custom CSS** field on the Style tab of your widget’s settings:

  

Check it out and let me know if you like the result 🙂