Little transition on cards hover effect

[gdjohn4s]

Is your feature request related to a problem? Please describe.

No, it is a modification related to the hover effect on a card's exit. The difference may seem imperceptible, but I believe that this small difference can make the user experience better.

Describe the solution you'd like

Currently, when the user moves the mouse from one card to another or from a card to an element outside the cards, the hover effect disappears suddenly. With this modification, the hover effect would disappear through a transition. For this modification, we have tried various effects and think that this is the one to use:

• transition: background 0.2s ease;

Concept video

[iamjamesfrancis]

Hi @gdjohn4s , Can I work on this issue ?

[gdjohn4s]

Yes of course @iamjamesfrancis Thanks!

[iamjamesfrancis]

@gdjohn4s , Please check the below video. If these changes are good enough I'll create PR. . CSS Properties

Card.vue:155

  .glass-card {
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
    background-color: var(--bg-card-glass);
    border-radius: 12px;
    border: 1px solid var(--border-color-cards);
+   transition-property: scale, background-color;
+   transition: 0.3s ease !important;
  }

https://github.com/Exifly/ApiVault/assets/55175085/3db40d94-7525-44d9-98f0-0b7790fa6ae3

[gdjohn4s]

@iamjamesfrancis Please open a PR so we can review your code and request changes if needed 😄 Thanks

[iamjamesfrancis]

@gdjohn4s Sure 💯

[FlavioAdamo]

@iamjamesfrancis any update?

[iamjamesfrancis]

@FlavioAdamo, Today EOD IST I'll submit the PR.