Свойство clip-path

Свойство clip-path можно применять ко всем элементам HTML, а также графическим элементам SVG и элементам-контейнерам SVG. Оно позволяет «обрезать» элемент практически любой формы. Это может быть отсечение прямоугольной формы, в виде круга или овала, а также фигура произвольной формы — много-много-многоугольник.

Обо всех этих возможностях написано множество статей, поэтому на них останавливаться не будем. Сегодня рассмотрим несколько иное применение свойства clip-path

Во многих случаях верстки, при наведении на картинку происходит некая трансформация — сдвиг, перемещение, вращение-кручение и многое другое. Но во всех этих случаях изображение трансформируется в целом виде, т.е картинка, скажем, съезжает влево целиком, а не какая-то его часть, открывая при этом новую информацию.

В этой статье мы будем «рвать» картинку на 2 части, причем линию разрыва можем выбирать различной формы. Все начинается с HTML-кода. Через тег figure прописываем 2 одинаковые картинки, каждую из них будем обрезать по своим параметрам и 2 SVG — прямоугольника, которые за счет width= «0» и height= «0» невидимы. Каждой SVG-картинке задаем свой идентификатор.

<figure id="halve_x">
  <figcaption>Вулкан не дремлет</figcaption>
  <img src="img_1.jpg" alt="">
  <img src="img_1.jpg" alt="">
</figure>

<svg id="svghalve_x" width="0" height="0">
  <defs>
    <clipPath id="tophalf" clipPathUnits="objectBoundingBox">
      <polygon points="0 0,1 0,1 .5,0 .5" />
    </clipPath>
    <clipPath id="bottomhalf" clipPathUnits="objectBoundingBox">
      <polygon points="0 .5,1 .5,1 1,0 1" />
    </clipPath>
  </defs>
</svg>

В таблице стилей прописываем необходимые параметры.

#halve_x {
  position: relative;
  width: 750px;
  height: 421px;
  margin: 40px auto;
  overflow: hidden;
  background: url(img_2.jpg);
  background-size: cover;
}
     /* Размещаем оба изображения внутри <figure> */
#halve_x img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: 2s ease-in-out;
}
     /* Делим каждое из изоброжений попалам */
#halve_x img:first-of-type {
  clip-path: url(#tophalf);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
#halve_x img:last-of-type {
  clip-path: url(#bottomhalf);
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
     /* При наведении каждая из половинок трансформируется по своим параметрам */
#halve_x:hover img:first-of-type {
  transform: translateY(-45%);
}
#halve_x:hover img:last-of-type {
  transform: translateY(45%);
}
     /* Параметры надписи */
#halve_x figcaption {
  position: absolute;
  top: 0;
  padding:3% 0;
  font-size:60px;
  text-shadow: 2px 2px 5px #111;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
}

На этом можно было и закончить, если бы не одно НО.
На примере 1, когда «линия раздела» проходит практически по линии горизонта и поэтому «теряется» в пестроте красок. Но стоит «линию раздела» сдвинуть немного выше или ниже увидим перфорированную линию ( состоит из множества «дырочек», через которые просматривается изображение, которое открывается при наведении). Это хорошо просматривается на примерах 2 и 3, если их задавать по той же схеме, что и пример 1.

Для того, чтобы избавиться от этой проблемы добавим еще одно изображение между уже заданными, которое скроет «перфорацию»

<figure id="halve_x">
  <figcaption>Вулкан не дремлет</figcaption>
  <img src="img_1.jpg" alt="">
  <img src="img_1.jpg" alt="" class="opasity">
  <img src="img_1.jpg" alt="">
</figure>
......

При наведении эта картинка будет «пропадать» до момента начала трансформации и «появляться» после полного «смыкания» линии разрыва.

#halve_x img.opasity{
  transition:2s cubic-bezier(1,.01,.96,.06);
}
#halve_x:hover img.opasity {
  opacity: 0;
  transition: .1s ;
}

«Линию разрыва» можно задавать какой угодно, все зависит от желания и возможностей верстальщика. Виды трансформации изображения ограничены только фантазией разработчика, можно применить не только плоскостные, но и 3D-трансформации.

Вот один из вариантов для 2 примера.

#halve_diagonal:hover img.halve__img:first-of-type {
  transform:scale3d(0,1,-1);
}
#halve_diagonal:hover img.halve__img:last-of-type {
  transform: scale3d(1,0,0);
}

Остается пожелать творческих успехов.

Как это выглядит в реальности можете посмотреть на демо-странице.