How to add / remoe text on an img hover?

Site URL: https://www.inspireconference.tv/

Hey guys, im trying to do this effect that 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 but more 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. 

Can you share link to page we can see Mike Kai?