Jump to content

How to make text appear over image when hovering??

Recommended Posts

I'm looking for help with how you add text to appear when you hover over an image. Also how you make the image change to a block colour or the transparency of the image change whilst you're hovering over it. this is on images on a regular page not a portfolio page. I know absolutely nothing about coding so need this in the most simple of terms! 

Link to comment
  • Replies 4
  • Views 441
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

23 hours ago, ConnectPlym said:

I'm looking for help with how you add text to appear when you hover over an image. Also how you make the image change to a block colour or the transparency of the image change whilst you're hovering over it.

As a starting point, we'll need to know which elements you are using to 'build' the page, as the code will depend on the method being used. 

For consistency, both in design and responsiveness, I'd recommend adding each image tile and title to individual blog posts in a new Blog Page. These make good 'containers' for this information. You can then use a Summary Block to display each image/title 'tile' in formatted row, without needing to resize individual image and text elements. They'll also 'collapse' nicely into columns on mobile. Portfolio Pages and Gallery Sections behave in a similar way, but these share their settings with all other elements of the same type, so they generally require more code.

Also, bear in mind that hover events don't work in the same way on touch devices so, as demonstrated really well in the example you provided, you'll need an alternative view for mobile devices:

image.thumb.png.712d4e6f0d3c2b5967431718818ffb06.png     image.thumb.gif.557896358fbc045b2ad80a7e27de0704.gif

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Hiya,

Ok thank you for your help, how do i ensure it looks different for a mobile as you've shown in the pic? 

So do you mean i need to set up the pages i want as 'blog posts' despite not being blogs? so that it will work better and display better on the page i want the images to change when hovering over them?! 

 

As to the elements used to build the page - i've been using a blank section and adding in image blocks - is this what you mean?

Edited by ConnectPlym
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.