# (Squarespace) Grayscale to Colored images in Blog Posts

**URL:** <https://community.elfsight.com/t/squarespace-grayscale-to-colored-images-in-blog-posts/104126>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [February 28, 2025, 2:09am UTC](https://community.elfsight.com/t/squarespace-grayscale-to-colored-images-in-blog-posts/104126 "2025-02-28T02:09:53Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [February 28, 2025, 2:09am UTC](https://community.elfsight.com/t/squarespace-grayscale-to-colored-images-in-blog-posts/104126/1 "2025-02-28T02:09:53Z")

</div>

Description

- Blog Posts
- Initial: Grayscale Images
- Hover: Change Grayscale to Colored Images

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/d/5d8e956ff61a191e2fe0a6e300f14054209e846e.jpeg)

You can use this code to Custom CSS box  
If code doesn’t work, you can comment below, [message](https://community.elfsight.com/u/tuanphan/) or [send me an email](https://community.elfsight.com/u/tuanphan/summary).

```auto
div.blog-item-content-wrapper img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
div.blog-item-content-wrapper .image-block:hover img {
    filter: grayscale(0);
    -webkit-filter: grayscale(0); 
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/9/0939dd86dd2f0a750300b3e13a99b831205ed5d6.png)

---

<div class="post-metadata">

**Author:** ![romano97002](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/romano97002/32/95751_2.png) [@romano97002](https://community.elfsight.com/u/romano97002)\
**Post date:** [February 28, 2025, 4:28pm UTC](https://community.elfsight.com/t/squarespace-grayscale-to-colored-images-in-blog-posts/104126/2 "2025-02-28T16:28:10Z")

</div>

@tuanphan,

❤ ❤ ❤