# (Squarespace) Overlap text - image in Product block

**URL:** <https://community.elfsight.com/t/squarespace-overlap-text-image-in-product-block/102652>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [February 21, 2025, 12:20am UTC](https://community.elfsight.com/t/squarespace-overlap-text-image-in-product-block/102652 "2025-02-21T00:20:13Z")\
**Posts on this page:** 1\
**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 21, 2025, 12:20am UTC](https://community.elfsight.com/t/squarespace-overlap-text-image-in-product-block/102652/1 "2025-02-21T00:20:13Z")

</div>

To make text overlap image in Product Block, like this.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/a/5a643a7bf9bd9b0987a420bff61c55a9d615f3b1.png)

**#1.** First, [find Product Block ID](https://community.elfsight.com/t/how-to-find-id-in-squarespace/65340).

In my example, it is: #block-yui\_3\_17\_2\_1\_1739950099133\_864

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/b/ebc41d64034cbc160fec36de6ba94e94e4f4c581.png)

**#2.** Next, 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
#block-yui_3_17_2_1_1739950099133_864 { 
.product-block {
  position: relative;
  color: #fff;
}
.product-block .image-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 999;
}
.product-block .productDetails {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 100%;
}
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/9/a9f68834538afaf16b45dc9514c31c768f982ad1.jpeg)

Remember to change ID.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/4/f4823b4ce9c0073a5afff634d1b50877422e70f7.jpeg)

**#3.** To change overlay color, change this.

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