Как сделать, чтобы один прозрачный блок перекрывал другой?

Question

[megamutex]

Здравствуйте. Как сделать, чтобы один прозрачный блок перекрывал контент другого?


Важно, чтобы структура была примерно такая, т.к. 1-у блоку будет задана анимация, которая будет поднимать его вверх и по мере продвижения будет появляться 2-й блок:

Answer 1

[Valery]

Сделать обертку для второго дива с overflow: hidden не вариант?
codepen.io/anon/pen/yNpjgW

Answer 2

[Денис Инешин]

Например так, с помощью position: absolute;
jsfiddle.net/IonDen/Lb8Lj4xa

И в другом порядке с помощью z-index:
jsfiddle.net/IonDen/Lb8Lj4xa/1

Comments

[megamutex]

Не совсем то. Нужно чтобы div1 был прозрачным и перекрывал контент блока div2.

[Денис Инешин]

megamutex: Тогда вот так: jsfiddle.net/IonDen/Lb8Lj4xa/1

[megamutex]

Денис Инешин: опять не совсем то) прикрепил гифку, чтобы понятнее было

[Денис Инешин]

megamutex: ооо, вот оно чо. Тогда никак, вам нужно имитировать прозрачность. Т.е. засунуть в "прозрачный" блок такой же фон как и у body: jsfiddle.net/IonDen/Lb8Lj4xa/2

[megamutex]

Денис Инешин: в этом и проблема) в моем случае это невозможно. Может можно использовать маски?

[Денис Инешин]

megamutex: попробуйте соорудить конструкцию с помощью clip