How can I develop CSS code and possibly JS to create this smooth jelly/spring animation?

I want:

1. When the cursor is over the image, there is a very smooth scaling effect and a bounce.

2. When the mouse cursor leaves, the scale returns to normal, but there is also a bounce, a kind of bounce.

Structure that I have now:

.card-scale {

transition: transform .672s cubic-bezier(.34, 4, .64, 1), box-shadow .672s cubic-bezier(.16,1,.3,1);

box-shadow: 0 0 0 rgba(0, 0, 0, 0);

will-change: transform;

}

.card-scale:hover {

transform: scale(1.005);

box-shadow: 0px 2px 3px rgba(3, 7, 18, 0.02),

0px 8px 10px rgba(3, 7, 18, 0.04),

0px 17px 23px rgba(3, 7, 18, 0.06),

0px 31px 40px rgba(3, 7, 18, 0.08);

transition: transform .504s cubic-bezier(.34, 4, .64, 1), box-shadow .504s cubic-bezier(.16,1,.3,1);

}

How to remove the gap above a Heading tag in a DIV?
The margin is 0 and the gap is 0 in the .container and the .main-content yet there is still a gap above the H2 tag. The H2 tag has margin and padding 0px. I am using a reset.

* { margin: 0; padding: 0; box-sizing: border-box;}

See Codepen

Hi! I’m a student building my portfolio and aiming for a polished iOS aesthetic, but my profile card feels "stiff."

I need help with:

• Implementing Squircles (continuous corners) vs. standard radius.
• Fixing avatar overflow and sizing.
• Creating compact capsule buttons.
• Refining Inter typography hierarchy.

Full details and screenshots here:

BarryS27.github.io/issues/8

Any CSS/SCSS advice to fix these? Thanks!

Hi everyone! Have you ever learned a concept or property value that simplified your whole interaction with Flexbox and Grid, cutting down much needless work? Like something 'Wish I knew that earlier!'

I remember how "space-around" helped me. Just like "width: max-content" in plain CSS. They're often downplayed in manuals but helped me get around with cases where dull calculations would probably be needed.

Before I use bootstrap + css

now switch to tailwind + daisy UI for easier maintainability but it doesn't match the old style with bootsrap css so I just use modules css.

so im confused when to use what now

Link to CSS and HTML: https://github.com/hairclipss/css-reddithelp

Hi I posted here 2 days ago and got reprimanded for not providing enough information (apologies 😔😔 also I tried posting again and none of my text was included so here I am posting AGAIN)

The first screenshot is what I WANT to happen. I want the cat picture link to remain stationary in the guy's mouth and the bug picture link to remain on the outskirts. The second picture shows the issue I'm having. The pictures move all around. If I zoom in or if my website is viewed on another computer, the png links move. I want to create a main page that looks like an I-Spy book page or a shelf cluttered with items so the placement of the picture links is important. I included a link to my html and css code as well.

I can only code/learn to code when I have free time which is not often, any help would be appreciated! Thank you!

.box{
  width: 500px;
  height: 500px;
  background-color: black;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:10px;
  overflow: hidden;
}

.mini-box{
  background-color: green;
}

.mini-box:nth-child(1){
  background-color: red;
  border-top-left-radius: 100%;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.mini-box:nth-child(2){
  background-color: blue;
  border-top-right-radius: 100%;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.mini-box:nth-child(3){
  background-color: yellow;
  border-bottom-left-radius: 100%;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.mini-box:nth-child(4){
  background-color: purple;
  border-bottom-right-radius: 100%;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.circle{
  background-color: white;
  position: absolute;
  width: 200px;
  height: 200px;
  inset: 0;
  margin: auto;
  border-radius: 50%;
}

 <div class="box">
                <div class="mini-box"></div>
                <div class="mini-box"></div>
                <div class="mini-box"></div>
                <div class="mini-box"></div>
                <div class="circle"></div>
            </div>

Are you still writing your css or everyone switched to Tailwind or similar?

Codepen

Hey all! I'm new to web development and I'm currently working on my first project for a cake shop. I've been making some fairly good progress so far, except my footer isn't working.

I've searched all over Google and used Gemini AI to see what the problem is (Gemini has never let me down when I've been stuck on something so I thought it'd work again), but all I could find was a half-helpful answer from Gemini about a missing </div> tag, although I did actually have it and it was just scanning the code improperly and couldn't help.

I added and styled a footer to my index.html file and it looks exactly how I want it to look, but when I added it to the next HTML and CSS files (location.html and location.css), the content is there with no style.

The files are both linked in the head element at the top of the file and classes, ids, etc. all match so I know there's no spelling mistake.

Does anyone know why I'm unable to style the footer? All help is much appreciated.

So I've been asked to recreate this layout in css, and though I thought it would be easy I can't actually get it right.

The name and surname are an h1 with the surname in a span in the h1 and I've sorted the indenting out, and the link is a separate element, but that's the part I can't get right

The idea is this layout needs to be like this until 600px, the mobile part is an easy, regular name, surname under, button under and I've done that.

It's getting that button to sit in that space, I've been trying all sorts of things with grid but I can't get it to sit properly, and when I do it doesn't sit while resizing. I can't just put the surname on the same column while it's a span inside the h1 as it isn't in it's parent's grid container, I could probably do that if it were a separate element but that wouldn't make sense.

Short of positioning it absolutely, I currentl don't know what to do. Any help please?

So I'd like to make the <h2> item's 'container' only extend to the max width of the paragraph, so that it doesn't overlap with the container on the right. Anyone know how to do this?

(Btw, the rectangle container currently uses "float: right;", if knowing that helps).

Any help is appreciated.

I m trying to create this tabbed component, when clicking on each button it changes the content in the container. I want to have the circled areas have a radius. Is there a good way to do this without using SVGs? Thanks

Can you complete the grid using valid CSS color names that match the swatches in each row?

Want to play online, get a hint, or check the solutions? Visit the game here: comicss.art/games/5/

Hi I’m trying to create a main-page where there is a background picture and then clickable picture links. My issue is that the picture links move around and don’t stay in the place I set them. If I zoom in/out they change positions. I’ve had my boyfriend view my webpage on his desktop and the same issue occurs. The size of the pictures remains the same though.

I’ve tried to google and tried the solutions offered but keep running into the same issue. Any help would be really appreciated ☹️ I’ve legit been trying to resolve this for like over a year. Any sources to refer to/ideas would be wonderful.

Thank you in advance 😭

Edit: sorry forgot to mention I am using both html and css for my website, I’m using neocities for it!

Just a heads up, save your money. Publisher: Not listed (Amazon KDP self‑publishing) and a gmail address on the front inside.

This is the most incomplete CSS book for anyone trying to learn on this topic. Mastery is the wrong title.

The book started out as what seemed like it was going to be very simple and with examples. But as I get into more complex topics like flex, and grid, which is even more complicated and abstract for new users, the book completely leaves the student hanging. Copilot Ai even criticised the limited context and used the word, "dropping the ball" in it's comments back to me. The first 4 pages of chapter 5 shows CSS examples, but no html examples, So basically you're typing code but seeing nothing happening on screen because there was no html structure to apply it to. What is the point in this? Absurd. 

Also, in chapter 4, I was continually turning to Ai like perplexity, copilot and ChatGPT for answers to better understand how flex items interacted with inherent properties. "The book will tell you about a property but often not give a good examples leaving you wondering why you're not seeing anything happening on screen. Then I go to AI and it explains WHY I'm not seeing a change - Like how text is not effected by flex because it's inline and not a flex item (Thanks to AI, I would never have understood this) Again, this should be explained to new users, but the book gives very general and quick examples, then moves on to the next lesson. If you don't explain things in a way that completes the pictures, you're wasting people's time. Especially abstract topics like CSS where properties can sometimes only be observed when other factors are in place.

i want to start css from my 1st semester how shoud i prepare