Как сделать такую трансформацию на css?

Question

[lb-web]

Есть вот такой блок: prntscr.com/ku3vum
Смысл в том, что если навести на красную часть блока, она должна выплывать и замещать текст.
Я делал уже подобное mahmood. ru(без пробела), но адаптировать это адекватно не выходит. Т.к. надо менять текст весь, и не замещать, а как бы поверху(как мне кажется). Есть какие-то предложения? Может кто на codepen/jsfiddle видел такое?

Answer 1

[lamer350]

Чтобы вам могли дать адекватный ответ, нужно сформировать правильно вопрос. Лучше всего отобразить скриншотами как он должен работать и в каком месте у вас возникает ошибка.
Так как сейчас из вашего описания мы только догадываться можем что куда будет «выплывать» и что «замещать»

Answer 2

[Odisseya]

Красную часть блока кот. реагирует на hover (правый нижний угол) можно очертить с помощью clip-path в % и по наведению на нее показывать "скрытое содержимое", пример:


Другой вариант — рассчитывать "треугольную половину экрана" на js, чтоб двумя треугольниками поровну разделить экран CSS-трансформаций не достаточно, т.к. ширина и высота экранов вариативная нужно будет вычислять размер гипотенузы и угол ее наклона для каждого конкретного случая, пример.

Comments

[lb-web]

Хм, спасибо. Второй вариант наиболее приемлимый, попробую что-то с ним сделать