Раздвижной слайдер. Возможно ли сделать?

[yustnip]

Здравствуйте!

 

Есть задача сделать вот такой слайдер - https://yadi.sk/i/v6QfPqsxjcNdM (при наведении на каждый из трех кусочков изображений, соответствующее изображение должно появляться полностью, как бы раздвигаясь, уменьшая-сдвигая остальные).

 

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

 

Насколько возможно/сложно сделать такой слайдер? Буду очень признателен за наводку в какую сторону смотреть, чтобы такое реализовать.

[Great Rash]

div {

  overflow: hidden;

  width: 20%;

  height: 150px;

  -ms-transform: skewX(20deg);

  -webkit-transform: skewX(20deg);

  transform: skewX(20deg);

}

div img {

  -ms-transform: skewX(-20deg);

  -webkit-transform: skewX(-20deg);

  transform: skewX(-20deg);

}

Т.е. то, что внутри нужно деформировать в обратную сторону, тогда всё становится ок.

[Great Rash]

1) Сделать возможно.

2) Будет работать только в браузерах, поддерживающих трансформации (ИЕ9+).

3) Добавляем в контейнер N слайдов (допустим 5). В таком случае ширина одного слайда будет 100 / 5 = 20%.

4) При клике/наведении увеличиваем ширину одного из слайдов, допустим до 40%.

5) Одновременно с этим уменьшаем все остальные слайды на 20 / 4 = 5%.

[yustnip]

Спасибо за ответ. Я и планировал так сделать, но повторюсь, что при уменьшении ширины косые линии становятся прямыми и получается ужас. Ширина режется с края (где косая линия). Смотрел в сторону трансформации skew, но, насколько я знаю, она деформирует содержимое для искривления.

 

Плюс предполагаю еще возможную проблему с обработкой события наведения, т.к. прозрачность под косыми линиями будет наезжать на другие блоки и не срабатывать на нижних слоях.

 

В общем беда с этим слайдером. 

[yustnip]

Спасибо, буду пробовать.

[yustnip]

Все получилось, еще раз спасибо. Немного пришлось еще только сдвинуть внутренний блок влево, чтобы пустоту угла закрыть. jQuery так же отлично сработал на изменение ширины при наведении.