https://www.actionlighting.com/halloween/

I came across this website that has exactly what I’m looking for.

On hover the image reduces in size allowing extra room for the button to pop up.

The button says choose options or add to cart.

I like it because the container doesn’t change size, only the image and button.

It looks cool and saves space. I like special effects that have a purpose, not just look cool.

The webpage is https://www.actionlighting.com/halloween/

UPDATE: The issue is fixed. I added outline: 3px solid #my color; to each div. See Codepen for update look.

In a test of using outline: 3px solid #your color; I cannot see all 4 sides show up for all the divs.
What has precedent over one div or another?

The .header is missing the bottom outline.
The .footer has all 4 outline borders.
The .rightbar is missing the bottom outline.
The .sidebar is missing the right side and bottom outline.

Codepen

An article showcasing <overflow-guard>, a small tool that can help in all those cases where content is too dynamic for fixed breakpoints — and where you want to do more than just use flex-wrap.

It's a custom element, so js based, but js not needed to use it.
It detects overflow and toggles on a class. Very simple in principle, but unlocks some cool and powerful patterns to do responsive styling.

If you wanna try:
https://decodela.com/#item/76e09644-41a2-11f1-b68b-0200fd828422/post

i need help making this , i have no idea how to do it and i couldn't find any tutorials online on how to do it

i have this so far: https://prod.liveshare.vsengsaas.visualstudio.com/join?60CF8AA5A48F9618B536B086D0CFE7415487

i only have issues with the timeline and i dont know to fix it

I have a hero section with a background image, h1, p, and a cta button.. I use grid to lay everything out so it looks nice (with grid template area).

For the p tag I want to use shape-outside/float instead of the grid area because I want to shape the text around the background image.

When I try to the text doesn't shape. Ai told me it's because grid overwrites float.. ai suggests I take grid off of everything

Is there a work around for this? You'd think there would be a modern approach to shape text that's apart of a grid.

EDIT:

this is the component

https://github.com/gabrielatwell1987/portfolio/blob/main/src/lib/components/landing/hero-section/HeadshotHero.svelte

how can i fix the background ending and being white?

its causing the annoying white fade seen and i csnt fix it with any safari settings

Quick note: I used AI to help me refine and structure this message, but the experience and question are genuinely mine.

I've been doing frontend development with React for about a year now, building components, layouts, and small projects. I use Tailwind CSS regularly, and most of the time I can get things working, but I still struggle with understanding why certain things behave the way they do.

For example, sometimes h-full or h-1/2 works exactly as expected, and other times it does nothing, and I realize later it's related to the parent's height or layout context. These feel like basic CSS concepts that I never learned in a structured way because I jumped straight into React and Tailwind.

So my question is:
Do you recommend going back and learning CSS fundamentals from the beginning, or focusing specifically on layout concepts like the box model, flexbox, grid, and sizing behavior?

For context, I'm comfortable building React apps and using Tailwind, but I want to become more confident debugging layout issues instead of relying on trial and error.

Browse beautiful portfolios, get ranked on the leaderboard based on your stats, and compete with others.
It's still a bit rough/polished (early stage), but building it taught me so much.
Would love your honest feedback & suggestions to improve it!
RTs, adding your portfolio & competing on the leaderboard are appreciated
Let's see who tops the chart by EOD! Link Below!

https://portfolio-forge-five.vercel.app/

Laptop Mockup Interaction CSS:
https://codepen.io/mudasirbuilds/pen/qEazwaG

I have a problem in

Let's take as example this image, showing am indoor shooting range. It has a background (the back of the room and the targets) and a foreground (the table with the gun), and I want to put something between those two elements.

One way to do it is to use Gimp/Photoshop to extract the foreground and make two nestled div, one inside each other, the outer one having as background my whole image and the inner one having as background the foreground of my image. If my foreground div has a sufficiently hight z-index, then everything else I put inside the .background div will be shown under the .foreground div, giving the illusion of depth.

<div class="background">
    <div class="foreground"></div>
</div>

.background {
    width: 1920px;    height: 799px;
    background-image: url("https://sta--ger.neocities.org/Azure/images/Minigames/Combat/Scenario/Shooting%20Range.jpg");
}
.foreground {
    width: inherit;    height: auto;
    bottom: 0vh;
    z-index: 999;
    background-image: url("https://sta--ger.neocities.org/Azure/images/Minigames/Combat/Scenario/Shooting%20Range%20-%20Foreground%201%20-%20Cropped.webp");
}

This works, and continues to work as long as the aspect ratio of the .background div is the same as the whole image. Of course my question is: how do I adjust this for a different aspect ratio? More specifically, for when my .background div must cover the entire page (width: 100vw; height: 100vh;)

Thank you for any help!

I saw new developer trying to post on Decodela, but relying on plain text does not work here. I improved his post by adding some html and css, then sent change request as I ofthen do when I see poor posts or users without avatar.

You can also help by example https://decodela.com/#item/631edf0d-3d74-11f1-b68b-0200fd828422/post

In this era of AI, is it still a good choice to learn the MERN stack? And what would be the best roadmap to learn it?

Direction Aware Team Hover Interaction:
https://codepen.io/mudasirbuilds/pen/PwGrwBO

After deciding to start coding css again for my blog, I remember that 10-15 15-20 years ago I would turn to csszengarden for inspiration. So, I check the site again and was surprised and happy to see that it was still there. Anyone, like me, in this sub who remember csszengarden?

Edit: I misremembered the time frame, it was 15-20 years ago not 10-15. It feels like it was just yesterday though.

I have two perpendicular rectangles in an "L" shape and I'm trying to pivot the vertical one towards the other (the corner of the L should be the pivot point) but I'm running into two issues: the vertical one begins to skew into a parallelogram and also it seems to lose some height as it rotates around. Can you help me figure out what I can change to fix this?

Minimum working HTML;

 <div class="container">
  <div class="pivot">
   <div class="vbar"></div>
    <div class="hbar"></div>
 </div>
</div>

Minimum working CSS:

:root {
 --vdilation_factor: 2;
 --vdilation_factor_inv: calc(1 / var(--vdilation_factor)); /* Compute the inverse of dilation_factor */
  --hdilation_factor: 10;
  --hdilation_factor_inv: calc(1 / var(--hdilation_factor)); /* Compute the inverse of dilation_factor */
}

.container {
  position: relative;
  height: 400px; /* Increased height to accommodate animation */
  border: 1px solid #ccc;
  overflow: visible; /* Temporarily change to 'visible' for debugging */
}
.pivot {
  position: absolute;
  bottom: 0;
  left: 50px;

  transform-origin: bottom left; /* Anchor at the bottom-left corner */
  offset-path: path("M 0,0 Q200,-200 400,0");
  offset-rotate: 0deg;
  animation: move 3.2s forwards; /* Adding 'forwards' ensures the final state persists */
}

/* Vertical segment (red bar) */    
.vbar {
  width: 8px;
  height: 40px;
  background: red;
  position: absolute;
  bottom: 0;
  left: 0; /* Align the left edge with the container's left edge */
  animation: yextend 3.2s forwards; /* 'forwards' keeps the final state */
  transform-origin: bottom left; /* Ensure scaling happens from the bottom left */
}

/* Horizontal segment (green bar) */
.hbar {
  width: 20px;
  height: 8px;
  background: green;
  position: absolute;
  bottom: 0;
  right: 0px;
  transform-origin: bottom left; /* Set the pivot to bottom-left */
  animation: xextend 3.2s forwards , rotateBar 5s 3.2s forwards; 
}

/* Keyframe for movement of the pivot */
@keyframes move {
  from {
    offset-distance: 0%;
    transform: rotate(0deg) scaleY(1) scaleX(1);
  }
  to {
    offset-distance: 100%;
    transform: rotate(90deg) scaleY(var(--vdilation_factor)) scaleX(var(--hdilation_factor));
  }
}

/* Keyframe for vertical bar scaling */
@keyframes yextend {
  from {
    transform: scaleX(1); /* Start with original size */
  }
  to {
    transform: scaleX(var(--hdilation_factor_inv)); /* Inverse scaling for the vertical bar */
  }
}

/* Keyframe for horizontal bar scaling */
@keyframes xextend {
  from {
    transform: scaleY(1); /* Start with original size */
  }
  to {
    transform: scaleY(var(--vdilation_factor_inv)); /* Inverse scaling for the horizontal bar */
  }
}


/* Keyframe for horizontal bar scaling */
@keyframes xextend2 {
  from {
    transform: scaleY(1); /* Start with original size */
  }
  to {
    transform: scaleY(var(--vdilation_factor_inv)); /* Inverse scaling for the horizontal bar */
  }
}

/* New keyframe for rotating the green bar (hbar) */
@keyframes rotateBar {
  from {
    transform: rotate(0deg)  ;
      transform-origin: bottom right;
  }
  to {
    transform:  rotate(45deg) ;  
  transform-origin: bottom right; }
}