Text appearing on image hover

Site URL: https://grasshopper-earthworm-y2ge.squarespace.com/

Hi,

I have been str ugling with getting text to display when hovering over an image. The text isn't part of the image but a seperate code/text block.

I saw some examples on the forum showing how you can use the hover call + display in CSS to achieve this and it works for me when I stay in the same code block. Is there a wa y where I can hover on a image block and it then displays the text on the right side in its own text or code block?

This is what I use right now in the CSS: 

.naming:hover + #block-yui_3_17_2_1_1636981862686_7307{
  display:block;
}

#block-yui_3_17_2_1_1636981862686_7307{
  display:none;
}

Site adress: https://grasshopper-earthworm-y2ge.squarespace.com/

Password: november2021

Thanks in advance for any help or suggestions! 🙂

This worked like a charm!

Thank you for the help.

On 11/16/2021 at 4:23 PM, Beyondspace said:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const hoverItem = document.querySelector('#block-yui_3_17_2_1_1636454313626_16083');
    const targetText = document.querySelector('#block-yui_3_17_2_1_1636976739645_7146');
    hoverItem.addEventListener('mouseover', () => {
      targetText.style.display = 'block';
    })
    hoverItem.addEventListener('mouseout', () => {
      targetText.style.display = 'none';
    })
  })
</script>

<style>
  #block-yui_3_17_2_1_1636976739645_7146 {
    display: none;
  }
</style>

Hello, this is exactly what I want to do on this page but with swatches. So that when you hover on a small circle the word above changes to what that marterial is. The page is here:

https://clavichord-trout-3tzg.squarespace.com/product-template

Please can you help?

On 4/19/2023 at 4:16 PM, Beth_King said:

Hello, this is exactly what I want to do on this page but with swatches. So that when you hover on a small circle the word above changes to what that marterial is. The page is here:

https://clavichord-trout-3tzg.squarespace.com/product-template

Please can you help?

The page is 404?