Custom CSS only working in Edit mode

Hiya,

I entered the code below to allow visitors to hover over a picture, and the text box appears. However, it only works in edit mode. I googled this issue, and it suggested clearing the cache, but that had no effect. Hoping someone has some insight. Thank you!

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

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

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

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

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

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

55 minutes ago, JennMarie said:

Hiya,

I entered the code below to allow visitors to hover over a picture, and the text box appears. However, it only works in edit mode. I googled this issue, and it suggested clearing the cache, but that had no effect. Hoping someone has some insight. Thank you!

 

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

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

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

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

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

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

What is the website URL?

https://www.thebeginningcounselling.ca/

It's on the ABOUT US page, under The Process.

13 hours ago, JennMarie said:

It's on the ABOUT US page, under The Process.

Replace your code with the code below.

@media only screen and (min-width: 640px){
  #block-yui_3_17_2_1_1708918882415_73486, #block-yui_3_17_2_1_1708918882415_77563, #block-yui_3_17_2_1_1708918882415_79628 {
    opacity: 0 !important;
    transition: opacity 0.5s;
  }
  #block-yui_3_17_2_1_1708918882415_73486:hover, #block-yui_3_17_2_1_1708918882415_77563:hover, #block-yui_3_17_2_1_1708918882415_79628:hover {
    opacity: 1 !important;
  }
}

It worked!!! Thank you so so much for your help😊