Jump to content

change text on image hover

Go to solution Solved by tuanphan,

Recommended Posts

Hello, 

I wondered if it is possible to add some css which will change the text color when hovering the image above it?
To be precise, in section "Kategorije" on homepage (green one,  eng. Categories),  I would like to change text color when hover the visual representation of category itself.

Right now, I have only only added hyperlinks to texts, so they become yellow on hover, but I would like to make them active when hover the image, too.

The domain is Finvala.com
I am using personal plan, 7.1.

Thank you.

Screenshot 2023-01-20 at 14.55.44.png

Link to comment
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

21 hours ago, black_rooster said:

Hi tuanphan,

Thank you for your support.
I have already added a lot of customisation thanks to your replies.

However, this one didn't work. I have added it into the custom css but nothing changes.
 

Try this new code, to top of CSS box

.fe-63b43504833db81a0f22bd3f .image-block:hover * {
    color: #f1f !important;
}

If it still doesn't work, keep the code in CSS box & let me know, I can check it again easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/28/2023 at 7:03 PM, black_rooster said:

Still the same, nothing happened. 

Can you keep code in CSS box? We can check easier

https://www.finvala.com/

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 2/4/2023 at 1:49 AM, black_rooster said:

I am not sure that I understand you well.  😐
What do you mean by keeping the code in CSS box?
It is still in Design > Custom CSS.

I meant add & keep code in CSS Box, do not remove it.

Currently I don't see the code in CSS box. Can you take a screenshot of CSS box?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 2/12/2023 at 8:22 PM, black_rooster said:

Moved it, but it's still the same. 🙄

Screenshot 2023-02-12 at 14.21.43.png

Try this new code (this for first item). If it works, I will check other items

.fe-block-d54664b769f63a152454:hover+div+div * {
    color: #f0cc60 !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
On 2/18/2023 at 4:13 PM, black_rooster said:

Now it works! Thank you! 🙂

Use this code for all 3 items

.fe-block-d54664b769f63a152454:hover+div+div *, .fe-block-64cefbf2cfd3e40e32f4:hover ~ .fe-block-792b8d585da0f2a370f2 *, .fe-block-yui_3_17_2_1_1673360423989_4248:hover ~ .fe-block.fe-block-yui_3_17_2_1_1673360423989_5021 * {
    color: #f0cc60 !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.