Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 1
  • Views 192
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.