Jump to content

Hover effects with text for Gallery on a 7.0 page

Recommended Posts

I would like text to appear on a slightly transparent background when you hover over each image in the gallery on my homepage.
I have managed to get the white transparency to appear on hover, but that is as far as I could get.
The attached images are how I would ideally like it to look when you hover over it.
Is this something I do with a second image, and just have the hover change to the image version with the overlay, or is this something I do with the text description or title? Each image has a click through link and this is a 7.0 page.
Thank you!

Concussion Overlay.png

football 23 overlay.png

gday overlay.png

Link to comment
  • Replies 4
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

15 hours ago, tuanphan said:

You mean hover >> change to another image, or make text appear?

Whichever is easiest, and preserves the click through links. If i can get the hover effect to make the text appear and the text looks like the images i have attached, that would be great, but if it will be too difficult to get the text to appear in that way, then I will need to change to the new image.

Link to comment

Add to Custom CSS, the code for first two images

.slide [href="/come-say-gday"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/09/22/07/02/red-8268266_1280.jpg);

.slide:hover [href="/rebel-new-season-fashion"] img {
    content: url(https://cdn.pixabay.com/photo/2023/10/18/18/59/tomatoes-8324940_1280.jpg);


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.