question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[FEATURE] Add shadow transition effect to cards on hovering

See original GitHub issue

Description

The clubCard already has box shadow, but it would be great to add a shadow transition effect by hovering over it to make it more interactive

Screenshots

No interaction while hovering on it

cards-shadow

Additional information

No response

🥦 Browser

Google Chrome

👀 Have you checked if this issue has been raised before?

  • I checked and didn’t find similar issue

🏢 Have you read the Contributing Guidelines?

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
arpitv970commented, Oct 8, 2022
  • I was thinking of adding something similar to the color scheme already present there, instead of removing the gray shadow as it seems more to be standing-out
  • Also using transition property would make it smooth

This is what I am trying to say 🔽

feature-cards-shadow

0reactions
IAmTamalcommented, Oct 8, 2022

@arpitv970 will you be working on it or someone else ?

  • Let us remove the box shadow from club cards and have a very thin border.
  • On hover we can have a box shadow
Read more comments on GitHub >

github_iconTop Results From Across the Web

12 Bootstrap Card Hover Effects (With Source Code!)
Adding a shadow or transition when a user hovers over a card or button can let them know that element is clickable.
Read more >
Create a Hover Up Effect with CSS Box Shadow and Transition
Create a simple and cool hover effect with CSS box shadows to make it seem like the card (box container) is raising up...
Read more >
box-shadow transition performance - Cloud 66 Blog
Adding a CSS transition to animate the box-shadow of an element is a handy trick. It's a design technique that's often used on...
Read more >
Add Shadow Effect on Hover to DIV boxes - Stack Overflow
I've used this page as a guide in an attempt to set up a hover shadow effect. I tried adding "col-md-3" to the...
Read more >
Bootstrap Hover effects - examples & tutorial
Bootstrap 5 hover effect adds interactions when the coursor is over the element. ... Simply add .hover-shadow class to any element to apply...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found