Text Shadow on Header & Get Involved Hover - #78
Conversation
✅ Deploy Preview for storied-fox-9ba586 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
HasithDeAlwis
changed the title
| const link = data?.link; | ||
|
|
||
| const overlayStyle = { | ||
| backgroundSize: '100% 600%', |
There was a problem hiding this comment.
can we experiment with a smaller background size for the hover? I think it might be cool if the gradient didn't span the whole component 👍
There was a problem hiding this comment.
done. let me know if you want any edits. making the gradient not span the whole thing felt a little abrupt. so i just lessened it
| className="relative flex flex-col w-10/12 transition-all duration-30 text-white | ||
| rounded-tr-[3rem] rounded-bl-[3rem] | ||
| hover:rounded-tr-none hover:rounded-bl-none hover:rounded-tl-[3rem] hover:rounded-br-[3rem] | ||
| bg-primaryGray h-[16rem] sm:w-[32rem] sm:h-[22rem] shadow-red-bottom-left hover:shadow-red-bottom-left-hover" |
There was a problem hiding this comment.
Did the shadows look ugly with the gradient?
There was a problem hiding this comment.
no its just that the reference pic from Avantika didn't have them
| alt="Header Background" | ||
| /> | ||
| <div className="absolute z-10 top-[14vh] sm:top-[20vh] md:top-[18vh] w-full text-center"> | ||
| <div className="absolute z-10 top-[14vh] sm:top-[20vh] md:top-[18vh] w-full text-center" style={{'text-shadow': '2px 4px 8px rgba(0, 0, 0, 0.5)'}}> |
There was a problem hiding this comment.
I think this text shadow works well 🔥
| <div | ||
| onMouseEnter={() => setIsHovering(true)} | ||
| onMouseLeave={() => setIsHovering(false)} | ||
| className="relative flex flex-col w-10/12 transition-all duration-30 text-white |
There was a problem hiding this comment.
little typo here (duration-30), I know that wasn't you, but could we change that to 300
2 participants
No description provided.