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".