@Tanay-ErrorCode @Doraemon012 Please review this and let me know if any changes

@Ayushmaanagarwal1211 Fix the issues in layout.

1. Large screens:

2. Small screens:

@Tanay-ErrorCode i fixed that but if it is not fixed please send the screen size i will work on that accordingly

@Ayushmaanagarwal1211

1. There is no animation in some cards.
2. When the user hovers on a card it blinks.
3. When the user hovers on the card it increases z-index as intended but, if the user moves mouse out of the card, its z-index goes back to normal

Fix this.

@Tanay-ErrorCode i applied this animation to every image please check and it is changing the z-index on hovering

@Ayushmaanagarwal1211

1. When the user hovers on a card it blinks.
2. When the user hovers on the card it increases z-index as intended but, if the user moves mouse out of the card, its z-index goes back to normal. It should not go to previous state.

These two are still remaining.

@Tanay-ErrorCode I am a little bit confuse Like i have added this blink animation to all those cards so i am sharing a video please see that and tell me where i am doing wrong so that i can fix it accordingly
And when user hovering on a card so i am increasing the z-index to highest and when remove i am reducing the zindex

@Ayushmaanagarwal1211

Analogy Explanation

Imagine you have a stack of cards, each with a different importance level. The most important card is on top, and the least important is at the bottom. The importance of each card is represented by its z-index, which determines how "in front" the card appears compared to others.

1. Initial State:

   • You have four cards.
   • The z-index array [4, 3, 2, 1] indicates their current importance levels, with 4 being the highest and 1 the lowest.

2. Hover Action:

   • When you hover over a card, it becomes the most important card (z-index 4).
   • The previous most important card (which had z-index 4) moves down to become the second most important (z-index 3), and so on.

3. Visualizing with an Example:

   • Starting Point:
     • Cards: A, B, C, D
     • Z-Indices: A: 4, B: 3, C: 2, D: 1
   • First Hover:
     • You hover over card C.
     • New Order: C, A, B, D
     • Updated Z-Indices: C: 4, A: 3, B: 2, D: 1
   • Second Hover:
     • Now, you hover over card B.
     • New Order: B, C, A, D
     • Updated Z-Indices: B: 4, C: 3, A: 2, D: 1

4. Dynamic Adjustment:

   • Each time you hover over a card, it moves to the top of the importance stack, and the other cards adjust their importance levels accordingly.

Summary

In essence, when you hover over a card, it takes the topmost position in terms of visibility (highest z-index), pushing down the previously topmost card and adjusting the visibility (z-index) of all other cards. This dynamic reordering ensures the hovered card is always most prominent.

Kindly fix it accordingly.

@Tanay-ErrorCode Ohk ok now i understood fixing this

@Tanay-ErrorCode Please check

@Ayushmaanagarwal1211 This is good. You need to fix the blinking problem, i.e. opacity first becomes 0 and then increases.

We need something like this:

@Tanay-ErrorCode If i understood clearly you are saying this

@Ayushmaanagarwal1211 Observer the moment when the opacity becomes 0 just after hovering it. We don't need this type of blink

@Tanay-ErrorCode should i remove the opacity from 0 to 1

@Ayushmaanagarwal1211 Make it similar to the video I provided.

Ok

@Tanay-ErrorCode please check again i fixed that

@Ayushmaanagarwal1211 The latest commit isnt working, seems like some mistake, kindly fix it.

@Ayushmaanagarwal1211 Any updates?

@Tanay-ErrorCode yes I am fixing error please give me time for today

@Tanay-ErrorCode I fixed that check again

@Ayushmaanagarwal1211 Can you fix this image going out of the screen?

@Tanay-ErrorCode i fixed that please check i reduced the sized of the images to minimum

@Tanay-ErrorCode please check

@Tanay-ErrorCode what happened