Hover title on image block

Hi guys,

I am new to create website and i have issues with the css. 

In my "work" page, I create 16 images blocks for my showcases and I add titles on each blocks.

I want the title gone when hover so I follow some youtubers code. The code works when i am in editing mode. However, It not working on preview so I wonder what happen or is there anyway i can improve it.

the code i am using for each block

@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1697078785160_29302 {
opacity: 0;
 transition: opacity 0.5s
}

#block-yui_3_17_2_1_1697078785160_29302:hover {
opacity: 1;
transition: opacity 0.5s
  }}

It is my website :  dinosaur-gopher-x6fh.squarespace.com

password:makingmovies

Thanks for the help.

Thank for the solution, it works.

May i wonder what your code means? just for learning

Also i have the same structure in another page, how should i change the code you provide to make it work on another page? 

On 10/18/2023 at 9:02 AM, yuinia said:

Thank for the solution, it works.

May i wonder what your code means? just for learning

Also i have the same structure in another page, how should i change the code you provide to make it work on another page? 

#1. min-width: 768px means the code will run on screen size > 768px (usually = tablet + desktop only)

#2. It is ID...you will need to know a bit of code to find this, you can share link to another page, we can adjust code for you.