Как сделать прозрачное окошко в блоке с заданным bg-color?

Question

[wOneBvll]

Каким образом можно сделать такое прозрачное окошко, в котором будет видно позиционированный элемент бесконечной ширины


тоесть красный блок должен быть виден только в белом окошке inner, при этом блок будет анимирован и двигаться влево-вправо
у окошка будут закругленные поля и внутренние тени(эффект дырки)

Answer 1

[Арсений Матыцин]

Что-то типа диафильма?

1. «Ленту» вкладывай в «окошко», не снаружи.
2. Позиционируй без позицонирования (чтобы высота зависела от «ширины ленты»).
3. Обертке размеры по ширине + overflow:hidden;
4. Двигать можешь за счет transateX(-100% + [ширина окна]) → transateX(0);

Comments

[wOneBvll]

2. Позиционируй без позицонирования (чтобы высота зависела от «ширины ленты»).

это значит не указывать свойство position? типо position: static?

[Арсений Матыцин]

wOneBvll, это немного глобальнее, с опытом придет. Но да, это значит просто не указывать position:absolute, а либо оставлять так, либо использовать другими методы позиционирования.