Squarespace on Hover effect using #block-yui

Site URL: Here

Hey guys, I am on Squarespace and I'm trying to do this effect I saw on this Website. It's an on hover effect and when you hover over the image of one of the speakers, the img darkens and the text disappears. Then, new text (the description of the person) appears. How would I do this using css?

I currently have

//this darkens the img. (turns opacity down on hover over .5 seconds)
#block-yui_3_17_2_1_1659569849378_173807:hover {
 -webkit-filter: brightness(20%);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all 1s ease;
    transition: all .5s ease;
}

But when i try so add another #block after hover, like this it wont work:

#block-yui_3_17_2_1_1659569849378_173807:hover #block-yui_3_17_2_1_1659569849378_572143 {

opacity: 0;

}

#block-yui_3_17_2_1_1660170606940_7219 {

opacity: 100%

}

{
 -webkit-filter: brightness(20%);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all 1s ease;
    transition: all .5s ease;
}

Please help me figure out what i can do to make this work. Thanks guys.