How to trigger a specific slide when clicking a button/image

I have placed 4 icons over an image which increase in scale when hovering and clicking on them. Now, I also want them to trigger a text that appears when clicking one of them individually. I tried to solve this with a slideshow below the main image using .slide:nth-child(1) to target the specific slide when hovering.

This is the code that I've been using:

#block-yui_3_17_2_1_1678741246285_2451,
#block-yui_3_17_2_1_1678741246285_11495,
#block-yui_3_17_2_1_1678741246285_21876,
#block-aadbebd280ba4624dfc7 {
  cursor: pointer;
}

#block-yui_3_17_2_1_1678741246285_2451:hover,
#block-yui_3_17_2_1_1678741246285_11495:hover,
#block-yui_3_17_2_1_1678741246285_21876:hover,
#block-aadbebd280ba4624dfc7:hover {
  opacity: 0.8;
}

#block-yui_3_17_2_1_1678741246285_2451:hover ~ section[data-section-id="640fab92daa07174cc2c48c2"] .slide:nth-child(1),
#block-yui_3_17_2_1_1678741246285_11495:hover ~ section[data-section-id="640fab92daa07174cc2c48c2"] .slide:nth-child(2),
#block-yui_3_17_2_1_1678741246285_21876:hover ~ section[data-section-id="640fab92daa07174cc2c48c2"] .slide:nth-child(3),
#block-aadbebd280ba4624dfc7:hover ~ section[data-section-id="640fab92daa07174cc2c48c2"] .slide:nth-child(4) {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

section[data-section-id="640fab92daa07174cc2c48c2"] .slide {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
 

It would be incredible if someone could help me out here or give me any ideas for a better way to solve this. 

The password for the website is "rise1234".

Hi,

What is site url?