Help creating alternating triangle divs with dynamic CMS content

Hi! I am trying to create alternating triangle div blocks for a portfolio page.
Blocks contain a project image, a title, and a linear gradient.
On hover, the blocks become reddish and a date appears.
See pic (what I want)

But right now I’m can’t get the texts/gradient to flip.

I have used custom code together with the odd and even collection item tags to create the alternating triangle clip masks. Code below…

BUT…
I have no idea how to alternate my texts and linear gradient elements as they are on not styled on the collection item.
Can anyone help?

.collection-item-copy:nth-child(even) {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.collection-item-copy:nth-child(odd) {
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
}


Here is my site. Category-paintings page.

hi @fnj_lab you can select each odd element with JS to add class and than set its style

I have done very simple example to alternate text color and absolute position

here is live link
you can take it from there further

Hi Stan.
Thanks so much!

So you are using the JS to apply a .reverse styling to each odd child element of "#triangle"s?
Genius!

I can’t see any triangle class that you have added, so I’m guessing “#triangle” means there is a triangle attribute in the html that is automatically created from the svg polygon code…? Sorry, not at all a coding expert! Lol, this inducing makes my brain hurt - in a good way :smile:

Anyway, will give it a try now. Thank you so much!!

Ok, so I can’t get it to work. Frustration.
There must be something about the JS triangle that I don’t understand…
Could you please help?

Thanks!

hi @fnj_lab

  1. triangles is ID of collection

  1. triangle mask (shape) is applayed on each element with class thumb__container
  2. class reverse is add by JS on each odd element

all code is there in 2 embeds on the top => CUSTOM CSS and CUSTOM JS

Hi Stan,
I didn’t see the id added to the collection - now that makes sense! Thanks.
However, I still can’t get the code to work :thinking:

Would you mind having a look?
Here is the published preview
And here is the read-only link

@fnj_lab You do not have space between classes (this image show fixed code)

CleanShot 2020-12-12 at 17.26.21

hi @fnj_lab did you make it work?

Yes it worked!!!
Thank you so much for your help, I learned a lot from this.
:smile:

hi @fnj_lab if this was answer you have been looking for feel free to mark any answer as solution to be this request marked as solved

Thanks Stan,
I have done that now.
Best wishes

1 Like