How are such elements rendered?

Question

css

I'm laying out a landing page. There are several such blocks on the page: there are several pictures in each, when the screen size is reduced, the pictures should partially go beyond the right edge of the screen.

Actually, two questions
1. Now both images are absolutely positioned, how to assign each top/left according to BEM? If we simply create a unique BEM modifier for each image, then it will not be possible to create new such blocks with different top/left from the admin panel if there is no suitable class.
2. In order for the pictures to be partially hidden behind the right edge of the screen, the container has overflow: hidden. But this way the shadow is lost on the left of the leftmost picture. If you make a margin on the left, then the pictures will no longer fit the grid. How to proceed?
If I'm completely misunderstanding something, please point me in the right direction.

Answer 1

I will answer using the bootstrap example, but it will fit anything, as you understand.
1. Let's say you have two blocks:

<div class="row">
  <div class="col-xl-6"></div>
  <div class="col-xl-6"></div>
</div>

In the second block, .col-xl-6you imgadd the style to the image itself: , while the maximum width of the image should not be 100% ( ), this condition should not exist for it at all. Then your picture will become 100% wide and crawl out of the block. 2. As you rightly said, in order to not have a scrollbar - you need to do it for the block. But you need to do it not for the container (if you mean the bootstrap container), but for the section itself, or . In this case, there will be no problems with the shadow. width:inherit;max-width:100%;
overflow:hiddenbody

Answer 2

As far as I know, such images are rendered in the background, through background.