Weird… I can’t seem to get a cropped/not cropped combo happening… even though it seems like it should work. I can certainly have an ‘all cropped’ setup, and that has worked from the beginning.
It’s a two block/column layout (the second/right block is irrelevant in this issue, but I mention it for the context of the full layout):
My basic structure is:
= Row (going all the way across the screen)
== Bootstrap column (of two, each 1/2 the screen width… turns into full width and stacks vertically with the other column on XS and SM screens)
=== Row (inside that first column, so it’s only occupying the left half of the viewport screen)
(This is intended as a ‘folder’ for the clipped items, so that they can have an overlay:hidden tag applied to this container)
==== ‘Background image’ (Not in the HTML sense, it’s a regular img tag, but the image serves as the background for the block
==== Small animated overlay image 1 (spawns at random horizontal location at bottom of screen and travels up, respawning/resetting when it reaches the top (using GSAP animation system)
==== Small animated overlay image 2 (Same deal)
=== Close tag of that row
=== Row 2 (intended to hold the non-clipped item, and have no hidden overflow)
==== Image item (intended NOT to be clipped)
So, in summary:
–Bootstrap column (Set to overflow (blank))
------Images (‘Clipped group’)
------Image (‘Non-clipped group’)
Yet, doing this still results in NOTHING getting clipped, as opposed to having overflow:hidden just on the Bootstrap column, which successfully crops EVERYTHING (…my current default fallback plan, if I can’t get the clipped/non-clipped combo working).
I don’t get why the Row1 clipping isn’t working. It seems that the Bootstrap column has to have an overflow:hidden applied for ANY clipping to occur (which unfortunately means the ‘non-clip’ item gets clipped, since the effect becomes global for the whole block).
Overflow:hidden should work on a div, yet in this setup, it doesn’t (work on Row1 div… only on the Bootstrap column div, as a global/overall effect for the whole block).
Anyone able to explain what is happening here? Obviously I’m misunderstanding how things are supposed to work here.