Jump to content

Hover CSS to Crew Page

Recommended Posts

Guest csuarSquare

I was looking to implement a hover style to my Crew Page via the actual page's advanced css location.
I'm looking for something like: https://www.conducthq.com/about/
I'm aware of this thread with the script for the effect above: https://forum.squarespace.com/topic/94666-image-hover-change/

But, I am unaware of how to actually apply it to a specific page, not in the overall custom CSS.

Thank you!

(Image attached shows how the script injects itself into the header on my test site...)

Screen Shot 2020-01-07 at 10.49.46 AM.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

The code in that post is meant to be used in a CODE block. So upload the images you want to a gallery in the NOT LINKED section, then right click each image to get the URL for it, then use that URL in the code.

<img src="COVER_IMAGE" 
onmouseover="this.src='OTHER_IMAGE'" 
onmouseout="this.src='COVER_IMAGE'">

The above code goes into a CODE block on a page.

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized Trainer, a Squarespace Expert, and a Circle Member and I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials

Link to comment
Guest csuarSquare
On 1/7/2020 at 9:30 PM, Vigasan said:

The code in that post is meant to be used in a CODE block. So upload the images you want to a gallery in the NOT LINKED section, then right click each image to get the URL for it, then use that URL in the code.


<img src="COVER_IMAGE" 
onmouseover="this.src='OTHER_IMAGE'" 
onmouseout="this.src='COVER_IMAGE'">

The above code goes into a CODE block on a page.

Ahh, my apologies. Thank you! It works perfectly fine!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.