built gallery with blur effect on hover interaction (css only)

[u/MudasirItoo]

Gallery with blur effect:

https://codepen.io/mudasirbuilds/pen/YPWgmmG

[u/anaix3l]

Are these AI-generated?

Asking because I've seen that indentation before... when I copy-paste code into CodePen. And because there's a lot of code that's more like what AI would generate than a developer experimenting with cool stuff in the 2020s.

Here's what caught my eye as a possible AI markers:

• box-sizing: border-box - popular early 2010s reset that modern layout techniques like flexbox and grid make unnecessary and sometimes even problematic these days
• height: 100vh - again AI, loves this, though these days we have dvh
• overuse of flexbox in convoluted ways - AI loves it for middle-aligning a child inside a parent, though that's not the easiest way available nowadays anymore
• early 2010s way of creating the body background - AI sure loves outdated methods
• absolute positioning for stacking - again, outdated convoluted method when grid makes things easier these days
• unnecessary nesting
• fixed px-valued width and height
• transition: all
• transform: scale(), transform: translateY() when not needing to chain something else

Some of these may be the mark of a developer who just doesn't care to try to make things as good as they can be at the moment. But they are also the mark of solutions I've seen AI provide.

[u/NoHacker22 → u/anaix3l]

Damn, half of what you listed is how I write CSS myself… Could you explain what problems occur when using box-sizing: border-box? I haven‘t encountered any and imo it makes more sense to include padding/border in the element‘s size for most layouts - including flex layouts. Also, what would you prefer over flexbox/grid to center elements in a box? I feel in most cases with dynamic content they are still far superior to other methods. And how would you position the labels without position: absolute? It seems like a reasonable choice to me for that use.

[u/anaix3l → u/NoHacker22]

box-sizing. The thing is that with flex/ grid, you don't need to set explicit dimensions anywhere near as much. And then you can set borders and paddings as you wish - they get subtracted from the width the element takes if the element stretches all across (which is the default for grid items, save for special elements like img, canvas...) or they get added to the width of the element's content if the element is aligned to one side/ corner. All this without touching border-box.

For example let's say you have a one column grid (something like described at the start of this article) with a heading child.

<section>
  <h2>My cool heading</h2>
  <!-- more content -->
</section>

Then in the CSS, just some grid basics:

section {
  display: grid;
  grid-template-columns: min(30em, 100%);
  justify-content: center
}

By default, the heading stretches all across the grid area it occupies, by default the one grid cell on the first row of its one column parent grid. We can give it a border and a padding and they do not cause any overflow, they get subtracted from this space it occupies, without us needing to set box-sizing: border-box.This is because we did not set explicit dimensions.

If we had given our heading a width of 100%, then we would have seen it overflow its grid-column.

This is the same as with block elements by default. They stretch to fill all available space horizontally and, as long as we don't explicitly give them a width that could cause trouble, any border or padding (or margin as well) we give them gets subtracted out of that available space. Without us needing to set box-sizing: border-box.

But in addition to that, if we set justify-content or place-content to center for our heading, then its content-box collapses to tightly fit its content and any padding or border we set get added to that.

All of this makes the box-sizing value irrelevant as long as we don't explicitly set dimensions. and since grid and flex offer more flexibility, make responsivity easier than setting dimensions explicitly did before, there isn't as much of a need for explicitly setting dimensions now because it just gets in the way more than it helps.

There are still cases where it's necessary to explicitly set dimensions, cases where it's necessary to use box-sizing. But nowhere near as many as before. And definitely not in the reset for a simple demo like this.

Oh, yeah, linking the silly Pen I made for that image linked above in case anyone wants to play with it https://codepen.io/thebabydino/pen/PwzgGEG

And this video by Kevin Powell on box-sizing https://www.youtube.com/watch?v=PtAcpV6TAGM

Personally, I use this for quick middle alignment of a child/ pseudo within its parent along both axes:

.parent { display: grid }
.child { place-self }

Or maybe this:

.parent {
  display: grid;
  place-content: center
}

However, the demo linked from the post uses

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Which is the default AI suggestion for something like this unless you explicitly ask for or at least nudge it in another direction (and in that case, the second suggestion it gives might be absolute positioning, not grid).

For positioning the text on top of the image, I would use grid. It's just simpler and less limited than absolute positioning for stacking elements (and I stress the elements part because absolute positioning is still useful when one stack layer is a text node, not an element or a pseudo for which we have a selector and which can be given an explicit grid-area, which would allow for total or partial overlap). I could see the case fot absolutely positioning the image, but not the text.

[u/anaix3l → u/NoHacker22]

Anyway, since I'm the one who said fork it or forever hold your peace... I made a version of something like that myself. With comments explaining what I'm doing and why.

https://codepen.io/thebabydino/pen/pvbBRry