Jump to content

Row hover effect

By harley, in Customize with code

Go to solution Solved by creedon,

Recommended Posts

  • Replies 5
  • Views 818
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

harley
harley

This works amazingly, you legend!!

Posted Images

HoaLT Level 6

HoaLT

Posted
Posted
1 hour ago, harley said:

Hello, 

I would like to add a hover effect over my service row just like this one - https://bark.london/ 

Is it possible to add this effect with CSS?

Look forward to your reply.

Thank you

Screenshot 2024-07-21 at 14.11.44.png

Sure, I check that it uses the CSS style with hover action. You can share your URL here and we can take a look

If your site is not published yet, refer set protected password for your site

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
  • Solution
creedon Level 15

creedon

Posted
  • Solution
Posted (edited)

This isn't a full solution but some starter code.

Add the following to Website > Pages > Website Tools > Custom CSS. 

// section hover effect, uses LESS syntax

[ data-section-id="669d0800eb50b43d4ed2cb08" ], // paid media
[ data-section-id="669d11e0f1972e50bd0d6755" ] // seo

  {
  
    &:hover {
    
      :not(.has-background) .section-background {
      
        background-color : var( --paragraphLargeColor );
        
        }
        
      h2,
      .sqsrte-large {
      
        color : var( --siteBackgroundColor );
        
        }
        
      }
      
    }

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 weeks later...
harley Level 5

harley

Posted
  • Author
Posted

Hello, i have now added this functionality to the website. I am looking at trying to add these orange arrows for styling. Currently, they are emojis for this example but could you help me add them in as CSS? 

image.thumb.png.27154fb5827078a51e3ca2090c8c3925.png

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources