Как реализовать подобный блок?

Question

[Даниил Прищепин]

Доброго времени суток, ребят!
Пытаюсь реализовать блок, показанный на рисунке ниже. Изначально планирую, чтобы область с водой на заднем плане занимала 100% ширину, а при наведении появлялась шестеренка и область с водой соответственно смещалась вправо. Как бы эффект того, что шестеренка находится под картинкой с водой. Пытался использовать z-index, не вышло. Надеюсь на Вашу помощь, заранее всем благодарен за ответы.
Вот что пока получилось: Ссылка