# How to change product block image on hover

**URL:** <https://community.elfsight.com/t/how-to-change-product-block-image-on-hover/140351>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [October 7, 2025, 7:50am UTC](https://community.elfsight.com/t/how-to-change-product-block-image-on-hover/140351 "2025-10-07T07:50:21Z")\
**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:** [October 7, 2025, 7:50am UTC](https://community.elfsight.com/t/how-to-change-product-block-image-on-hover/140351/1 "2025-10-07T07:50:21Z")

</div>

To change product block image on hover, from this.

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

to this.

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

**#1.** First, use this code to Code Injection \> Footer (or Page Header Injection)

```auto
<!-- Product Block Image Hover-@tuanphan-23-08-2025 --><script>const addProductImages=async()=>{const productBlocks=document.querySelectorAll('.product-block');if(productBlocks.length===0)return;const fetchJSON=async(path)=>{const queryParams='?format=json'+'&'+Date.now();const response=await fetch(path+queryParams);const jsonData=await response.json();return jsonData};productBlocks.forEach(async(block)=>{const productLink=block.querySelector('a[href*="/"]');if(!productLink)return;const productUrl=productLink.getAttribute('href');if(!productUrl)return;const imageContainer=block.querySelector('.image-container');if(!imageContainer)return;try{const productData=await fetchJSON(productUrl);if(!productData.item||!productData.item.seoData||!productData.item.seoData.seoDescription)return;const imgSrc=productData.item.seoData.seoDescription.trim();if(!imgSrc||!imgSrc.startsWith('http'))return;const existingSeoImage=imageContainer.querySelector('.seo-description-image');if(existingSeoImage)return;const newImage=document.createElement('img');newImage.src=imgSrc;newImage.className='seo-description-image';newImage.alt='SEO Image';newImage.style.cssText='object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0;';imageContainer.appendChild(newImage)}catch(error){console.log('Error loading product data:',error)}})};window.addEventListener('DOMContentLoaded',()=>{setTimeout(addProductImages,1000);setTimeout(addProductImages,3000);const observer=new MutationObserver(()=>{setTimeout(addProductImages,500)});const bodyElement=document.body;if(bodyElement){observer.observe(bodyElement,{childList:!0,subtree:!0})}});</script>

```

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

**#2.** Next, use this code to Custom CSS.

```auto
div.image-container:hover img {
    opacity: 0;
}
div.image-container:hover img.seo-description-image {
    opacity: 1;
}

```

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

**#3.** Next, edit each product \> Scroll down to SEO and URL \> click Edit

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

**#4.** Enter hover image url. Code will pull hover image from this field.

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