Jump to content

Text appearing on image hover

Go to solution Solved by Beyondspace,

Recommended Posts

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! 🙂

image.png

Edited by PRobbe
Link to comment
  • Solution
On 11/15/2021 at 8:31 PM, PRobbe said:

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! 🙂

image.png

Your image block and text block are located in different parent node. So using Css selector can not reach your desired result.

I suggest using the following code in Home > Settings > Advanced > Code Injection, choose the footer

<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>

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.