Как сделать такой эффект перекрытия фото?

Question

[Viktor Grachev]

Здравствуйте! Подскажите как можно сделать такой эффект перекрытия фото?

Не могу понять как реализовать такую картинку чтобы при наведении на верхнюю картинку она открывалась полностью. А при отведении мыши все возвращалось в исходное положение. И с нижней картинкой так же. Если кто встречал похожий эффект подскажите где почитать или как реализовать его.

Answer 1

[Igor Lanko]

Возможно, натолкнёт на какие-то мысли: jsfiddle.net/87tsx006/1.

Comments

[Viktor Grachev]

Классный эффект попробую применить его для своего проекта. Спасибо!

[Viktor Grachev]

Спасибо все получилось!

Answer 2

[Дмитрий Филимонов]

Перенес сюда из комментов пару вариантов, чтобы сразу было видно. Все размеры относительны (+ округлил значения расстояний), осталось только переписать согласно вашему стилю/препроцессору.

Только нижняя часть уезжает: jsfiddle.net/ozzh04k9
Обе: jsfiddle.net/cuyLpz8b

Также можно было использовать SVG: с ним потенциально меньше проблем со сглаживанием/размытием (а они иногда возникают с rotate, особенно в webkit), но больше с текстом (не разместить с переносом, например).