Create a hover effect on image block (Have tried 5+ CSS code snippets and cannot get it to work)

I've spent the last couple of hours trying several different CSS code snippets found on other forum posts, and asked ChatGPT to write a snippet, and cannot get any to work. 

There are three images on my home screen, i'm trying to get them to lighten when the mouse hovers over them 

Please help!

What is your website address? 

37 minutes ago, derricksrandomviews said:

What is your website address? 

www.tundratides.com

On 7/13/2024 at 10:31 AM, tuanphan said:

You can use this code to Website Tools > Custom CSS

div#block-e05ca4f3a9549e2c02bd:hover img, div#block-268daae426b3587a1f7b:hover img, div#block-19a0ea73c5dae009babc:hover img {
    opacity: 0.5;
}

Thanks for this however it hasn't worked. 
(I updated the block IDs so they are correct to what's on the page since I changed it, but still no dice) 

The updated page is this
https://www.tundratides.com/discover

The block IDs i'm using are: 

#block-e05ca4f3a9549e2c02bd
#block-268daae426b3587a1f7b
#block-19a0ea73c5dae009babc 

What am I doing wrong? 

On 7/17/2024 at 1:56 AM, Tundra_Tides said:

Thanks for this however it hasn't worked. 
(I updated the block IDs so they are correct to what's on the page since I changed it, but still no dice) 

The updated page is this
https://www.tundratides.com/discover

The block IDs i'm using are: 

#block-e05ca4f3a9549e2c02bd
#block-268daae426b3587a1f7b
#block-19a0ea73c5dae009babc 

What am I doing wrong? 

I just tested it again on my browser and it still works. You try move the code to top of Custom CSS box.

If it still doesn't work, you can keep the code in CSS box, I can check again easier.

div#block-e05ca4f3a9549e2c02bd:hover img, div#block-268daae426b3587a1f7b:hover img, div#block-19a0ea73c5dae009babc:hover img {
    opacity: 0.5;
}

4 hours ago, tuanphan said:

I just tested it again on my browser and it still works. You try move the code to top of Custom CSS box.

If it still doesn't work, you can keep the code in CSS box, I can check again easier.

div#block-e05ca4f3a9549e2c02bd:hover img, div#block-268daae426b3587a1f7b:hover img, div#block-19a0ea73c5dae009babc:hover img {
    opacity: 0.5;
}

Should I be putting this in the advanced menu -> Custom Code Injection, or somewhere else? 

It's the only code in there

On 7/19/2024 at 8:52 PM, Tundra_Tides said:

Should I be putting this in the advanced menu -> Custom Code Injection, or somewhere else? 

It's the only code in there

No. Custom CSS box

On 7/25/2024 at 8:33 AM, tuanphan said:

No. Custom CSS box

Ahh gotcha. That's worked! Thanks very much