how to code images that will pop up when i hover over the center image?
im still a newbie at css and html.
just like in the image, there should be four images that will pop up if i hover over the circle in the middle.
i also want these images to be clickable so that they will go to a different page in my website.
is there a way i can code this using css animations?...
How can I add truncate like ... if there is overflow in the <g></g> element
I'm using <g></g>
```typescript
<g clip-path="url(#card_clip)" >
${card_body()}
${card_image()}...
Vertical scrolling without using absolute height
So, for simplicity's sake, let's say I have two components: Component1 and Component2. I also have a main footer that comes from layout.tsx. I want the entire page to always be h-[100dvh]. I want Component2 to take up all the available space between Component1 and Main footer (which means I cannot give Component2 an absolute height), and if there is an overflow, then Component 2 should be scrollable. How do I do this? I am using Tailwind, if that matters.
filter: blur() and contrast() together doesnt work
How do I make the same effect of the image? I tried using the bit of code provided but it just blurs it
Get target scroll position of a smooth scroll element.
Question:
Is there any way to get the target scroll position/point and not the current scroll position.
I am able to get element.scrollLeft but thats current scroll position, I want the position where browser will stop the smooth scroll or stop the scroll "animation".
What I am trying to do:...
Angled border radius?
Hi, I am trying to recreate something, and am struggling to recreate the corner. They just did it with an svg, but I wanna do it with divs. How can I create the round corner thingy?
Current code (TSX & TWC):
<div className="w-4/6 h-[calc(100vh-14rem)] ml-28 flex flex-col items-end">
<div className="bg-[#3827c8] h-14 w-96 rounded-t-[3rem]"></div>...
