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…
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?
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-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
Thanks so much!
So you are using the JS to apply a .reverse styling to each odd child element of "#triangle"s?
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
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?
ID of collection
- triangle mask (shape) is applayed on each element with class
reverse is add by JS on each odd element
all code is there in 2 embeds on the top =>
CUSTOM CSS and
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
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)
hi @fnj_lab did you make it work?
Yes it worked!!!
Thank you so much for your help, I learned a lot from this.
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
I have done that now.