CSS Expert AMA: Becca Harpain

Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to welcome back Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, to answer your biggest questions about CSS. Check out the answers from the first AMA.

Why CSS on Squarespace matters

While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.

Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.

Who is Becca Harpain?

A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.

How to participate

Please reply to this topic with any questions you have by Monday May 6th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.

Hi Becca @inside_the_square,

I'd like to seek your advice regarding a UX hover effect. As we've been expanding the number of products on our website and adding more categories, we're looking for a way to enhance the user experience by allowing users to expand a category simply by hovering over it with their mouse. 

Currently, we've implemented a hover effect that changes the background colour of the category when hovered over, but we're interested in taking it a step further by enabling users to open the entire category page directly from the hover action. 

Any insights or suggestions on how we can achieve this through custom CSS would be greatly appreciated. Your assistance could greatly enhance the UX of our website! 

Here's the link to our website for reference: https://www.soju.com.au/

Thanks in advance for your help! 

Sorry to jump in, but that sort of navigation (hover to automatically expand category) sounds suboptimal from a user experience standpoint.

Firstly, it could be annoying rather than useful to have subcategories opening just because the cursor passes over them, especially because each category and subcategory is its own page. 

Secondly, it wouldn't work on touch devices. 

I like your hover effect. I think that gives a nice additional signal to click.

Perhaps a custom cursor when rolling over a category would provide a useful additional signal. 

Hi @colin.irwin, thanks for your insight. However, I still think this could help our user experience since you do not have to move to another page. I understand the hover effect does not work on touch devices but that would not be a matter. Our analytics does show half of our customers still use computers to purchase our products! 

I've seen some websites where they would put delay in hover effect that wouldn't make it too annoying for users to interact with. 

Any basic CSS would be very helpful! 

It can't be achieved using CSS only. It would require JavaScript too. 

Also, the data for the subcategories isn't available at the category level so there would need to be a lot of manual code maintenance to expose the navigation structure and you would need to edit that every time you added or amended the product categorisation. 

At the end of the day I think the cost of implementing and maintaining that functionality far outweighs the utility. 

Preloading a hover custom hover button so it doesn't flash in, nearly got it working with  1 issue to figure out.

Hi Becca @inside_the_square, i've learnt alot from your videos, thankyou!

I've been scouting all day and found a solution that is almost there. I had issues with my hover custom button flashing before changing which was jarring design wise. I fixed the flashing issue with preload code that works, but now the hover tiles and repeats itself.

This code below preloads the button image so it doesn't flash when changing to the image. but it repeats the hover image multiple times.

before hover:

When you hover on button:

Can you see the issue with the code to fix this issue?

/* Default styles for the centered div */
div#block-yui_3_17_2_1_1701422267607_2792 {
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin: auto; /* Center horizontally */
    position: relative; /* Use relative positioning */
    top: 50%;
    transform: translateY(-50%);
}

/* Media query for window width of 1200px */
@media (min-width: 1200px) {
    div#block-yui_3_17_2_1_1701422267607_2792 {
        width: 280px;
    }
}

/* Preload hover effect */
div#block-yui_3_17_2_1_1701422267607_2792::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://images.squarespace-cdn.com/content/64d0a4ef828d1802cb65112a/4c70cf50-9227-4584-8ac2-3504045de812/BUT_viewshowreel_ON.png);
    background-size: contain; /* Ensure the image fits within the container without distortion */
    background-position: center; /* Center the image */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
}

/* Apply hover effect */
div#block-yui_3_17_2_1_1701422267607_2792:hover::before {
    opacity: 1;
}

Last piece of the puzzle for the website any suggestions are appreciated, cheers.
 

I’m reading your post on an iPad so can’t really test the code but it looks to me like the rollover image is tiling. It’s a background image so it will tile to fill its container, which  I believe is 250px high (based on default styles at the top). Try changing the height to the actual height of the image so that the container exactly fits the image. 

2 hours ago, colin.irwin said:

I’m reading your post on an iPad so can’t really test the code but it looks to me like the rollover image is tiling. It’s a background image so it will tile to fill its container, which  I believe is 250px high (based on default styles at the top). Try changing the height to the actual height of the image so that the container exactly fits the image. 

Hi Colin @colin.irwin , thank you i've tried your suggestions and it does look alot better. 250px x 61 px is the the size.
although it still shows 1px of the tiling.
I've tried increments of the px like 250.1 , 250.2 or 61.2 , 60.9 and i cant get rid of the slight tile that remains.
the button image is wall to wall covered so no transparency exists at the edges also.

When i do a straight hover (without preloading) i dont have the issue, its when i preload, this tiling effect happens, if that info helps.
Cheers.

new result, better but with a slight tile regardless of px inputs.


 

Hey @MAC1 - I'm glad Colin was able to help, but I think your code is way more complicated than it needs to be! I'll share some custom button concepts when I write up the AMA answers later this week; stay tuned & feel free to ask me any other CSS questions you'd like an answer to 🙂 

On 5/7/2024 at 4:01 AM, inside_the_square said:

Hey @MAC1 - I'm glad Colin was able to help, but I think your code is way more complicated than it needs to be! I'll share some custom button concepts when I write up the AMA answers later this week; stay tuned & feel free to ask me any other CSS questions you'd like an answer to 🙂 

Hi @inside_the_square - Thank you for looking at this and look forward to the custom button concepts! haha Yes ive done alot of copy pasting code im sure there is conflicting values and confusing code, not much of a coder here. The preloading was important since just hover code was making the button flash before bringing in the other button img. Solving this issue will have my website almost finished, cheers appreciate it!
I may have 1 or 2 other CSS questions on other parts of the website. Should I message them in here?