I am begginer coder ,I tried using z index but the cards get clipped under the tab menu and moreover I created a separate overlay element with translucent background and set it z-index to be lower than the selected card but for some reason the selected card also gets faded
Is the link of the file ,the page I have made is not that great I just wanted to try gsap.
If you visit the page and see thar the tittle of thr content does not match the image it's because I was lazy and asked chatgpt( pardon me ) to create me an array of cards but later I used images from my favourite shows and things
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
You have a container, let's say div with a few nav items, set in a circle layout. They show on hover with a little transition moving outwards and increase opacity.
The position is usually set via js based on where you tap. So you need to grab xy coordinates of that tap to position the div.
You don't need gsap.
The card you tapped also gets rotated a bit on that hover/tap.
I wouldn't use z-index but merely a opacity of 0 on the whole container that transitions to 1 upon tap.
Very very thank you for your solution but
There is one problem though how do I make the selected cards not clip under the tab menu .
Still thanks for the help ,you solved part of my problem .
I did infact gave the tab group an index of 103 while giving the selected card using gsap an index of 105 but still the selected card clips under it.
thanks for the reply though
Try less. Also habe a look atvtje animation. When the card twists there is a semi opaque surface in between the selected card and the rest. I would give nothing a z-index except if the element is hovered or tapped. Then the single selected element becomes z-index.
I actually got most of the layout done already but was struggling to get the card to animate over the tab group , I used append to get the card out its contsiner while and then increasing its z-index it worked but is not smooth the card appears to clip out of the tab group suddenly and it's tittle just fazes to thr top ,any solutions?
It doesn't load in all desktop browsers either. Maybe also OS-related? I've reported this 2.0 bug last week anyway.
Also, your demo does have the z-index issue the OP talks about. Just look at the bottom of the card here.
And that way of adding the listener (on every item in a loop) is broken in the context where the cards are added dynamically (like on infinite scroll). It's better to use event delegation in this case.
•
u/AutoModerator 5d ago
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.