Есть необходимость сделать такую анимацию
https://jsfiddle.net/5nxv4tog/
для ряда картинок, которые находятся во флекс-обертке. Она, в свою очередь, должна подстраиваться под ширину экрана и перераспределять "колбасу" из этих элементов (с этим проблем, пока эффект не добавлен) в основной части страницы. При этом все великолепие должно быть совместимо с IE11. Изображение именно должно "приоткрывать" скрытую часть, а не просто увеличиваться.
Какие я знаю варианты:
1) JS. В крайнем придется использовать его, но пока задача попробовать обойтись;
2) Clip-path. Подошел бы отлично, но не поддерживается IE, к сожалению;
3) Border. Так часто делают, но фон сайта неоднородный, нельзя просто сделать рамку одним цветом;
4) Клип по SVG-фигуре. Вроде бы справится, но анимация будет выглядеть по-другому, если делать display: none по ховеру, как я понимаю. Поэтому не подойдет;
5) Clip. На нем и сделан пример по ссылке, но позиционирование absolute и fixed, без которых он не работает, убивают флекс.
EDIT: 6) Background-image тоже не подходит, т.к. у картинок помимо него будет слой с этим атрибутом.
К слову, под картинками внутри контейнеров еще будут кнопки, что не делает задачу легче.
Может быть, есть еще методы или хаки, о которых я не знаю?
Средний
Средний