Jump to content

Adding Hover Effect: Image Transparency and Text Box Visibility

Go to solution Solved by Lesum,

Recommended Posts

Hi Squarespace Forum,

I've created a features overview for our website www.qvonto.com. I need assistance in adding a hover effect for the features section. Specifically, I want the following effects when a visitor hovers over a feature:

  1. The image becomes slightly transparent.
  2. The body text below the feature appears.

The feature names should always remain fixed and white. Currently, the body text is also white for visibility. My idea is to make the text navy blue (matching the background) and change it to white on hover. However, I'm open to other suggestions for achieving this effect.

Can someone guide me on how to implement this?

Cheers,
Julius

Features overview.png

Link to comment

@Qvonto Hi! This can be done with custom CSS, but it would involve writing quite a bit of code because each image, title, and paragraph block needs to be targeted separately. If you create this section using an auto layout list section (select 'Add section' > 'People' > choose any layout and style it to match your current feature section), I can provide a CSS solution in just a few lines. Thanks!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
  • Solution
Posted (edited)

@Qvonto Hi! You can add this code in Website > Pages > Website Tools > Custom CSS to create the hover effect you mentioned.

section[data-section-id="668fc843777974502a3cacfe"] .list-item-media {
  transition: opacity 0.3s ease-in-out;
}

section[data-section-id="668fc843777974502a3cacfe"] .list-item-content__description {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

section[data-section-id="668fc843777974502a3cacfe"] .list-item:hover .list-item-media {
  opacity: 0.7;
}

section[data-section-id="668fc843777974502a3cacfe"] .list-item:hover .list-item-content__description {
  opacity: 1;
}

However, I noticed that when you initially hide the text below the features/feature description, it creates a large empty space between the rows. To reduce the space between the rows, you can add this code:"

section[data-section-id="668fc843777974502a3cacfe"] .user-items-list-simple {
    row-gap: 10px !important;
}

Hope that helps.

Edited by Lesum
Updated Code

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Qvonto In the first block of code, if you remove ".list-image" from the code, it should resolve the issue. I have updated the code for the first block in my previous comment. Please add the updated code and let me know if it resolves the issue on your end. Thank you!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.