Masking effect... with a twist

Beginners
1

Okay, if I have an image, and I am overlaying a number of smaller images on top of that (via positional offsets), I know I can clip all of them to the larger image (meaning, the smaller images will get cropped if parts of them extend past the edges of thelarger image they are on top of) via an Overflow:Hidden type of property deal.

But, is there a way to have one of those overlay images NOT get clipped, while the other DO?

So far, the overlay:hidden property is applied to the containing column/div… so it’s global to all the items within it. Seemingly, the only solution would be to have that non-clip image in a different div… but then it’s not referencing that first div for it’s coordinates.

Seems like it’s an all or nothing thing… unless there’s some other way to crop overlay images on top of a larger image, so they never display past the larger image.

Anyone have any suggestions? Whatever it is, it needs to be supported by all relevant browsers/platforms… so no experimental/wonky things, please! :smiley:

2

I didn’t follow your other thread that closely about how you designed the overlay in the first place, so I don’t know if this would work for you, but…
Wrap the div with overflow:hidden in another div. So,

<div class="relative">
    <div class="overflow">
        <img class="base-image">
        <div class="clipped relative"></div>
        <div class="not-clipped absolute"></div>
    </div>
</div>

So, the outermost div is positioned relative. The “overflow” div is positioned static and has to have a height and width along with the “overflow:hidden” rule.
Next you have your large base image. It should be the same size as the “overflow” div.
Next you have one or more divs (or img) that are positioned as relative. They will be clipped.
Finally you have one or more div/img that are positioned as absolute - these will not be clipped.
Hope that helps.
Bob

3

Hi, RobM. Thanks for the reply.

Ya, that’s pretty much what I ended up trying… putting the ‘clipped’ items in a nested div within the main containing div, while keeping the ‘non-clipped’ item out in the root of that main one. Seemed like a logical solution that would work.

Sadly, it didn’t. It seemed somehow like the state of the ‘parent’ div overpowered that of the child, so the ‘clipped’ group was not clipped.

But, you bring up an interesting possibility… Maybe I needed to exclusively set the parent div as overflow:(blank) for some reason. I’ll have to try that.

One of the other things I tried was having the non-clipped item in a separate div altogether, but then it didn’t scale/move with the others (responsive). Another catch-22… (I’m running into a few of those lately!

Failing that, I’ll live with how I have it now, with ALL the items getting clipped (which works great). It just looked pretty cool with that one item extening out from the main one.

I’m finding overall I’m constantly juggling/adding/removing various properties (img-fluid, mx-100, w-100, etc)… not always fully sure what is the right combo, and suspecting that one/some are interfering as I actually DO end up finding the right combo with other things (but fail to keep them, as the other conflicting ones make it seem like they are wrong).

Let me give it another go, with the idea you inspired there. Thanks!

4

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:

Row
–Bootstrap column (Set to overflow (blank))
----Row1 (overflow:hidden)
------Images (‘Clipped group’)
----Row2 (overflow)
------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.

5

Can you set up a code pen or access to the project somehow?

6

Ya, I actually learned how to do that, and signed up for it a day or two ago.

It will take a while to set up a demo scene, but I’ll try and do it. I was just hoping the question could be addressed on a general level… how it should work, what it won’t do, etc… as opposed to specific syntax issues or coding errors I may have made in my particular project.

I’ll post a demo here once I can get around to making one.

7

Here’s a very stripped down codepen version of the structure of the page I’m currently working on, trying to get the combo ‘clipped and unclipped’ thing happening.

I imagine this is not an ideal codepen demo, but the code I’m working with is ‘not codepen demo’ friendly, as it’s got lots of image links, inline styling (…I’m just doing that while I tinker), and other bloat that will just confuse someone looking at it, out of context.

So, I did what I could to strip it down, yet still have the relevant structure to ask the question I’m asking.

Hopefully this embed works… I’m new at this.