JSFiddle - React, Tailwind, and code Playground

by Wolf Wortmann

HTML

<img src="http://img3.wikia.nocookie.net/__cb20110428173444/denaruto3/de/images/thumb/1/19/SasukesVogel01.png/100px-36,717,0,680-SasukesVogel01.png" width="100" height="100" />

<img src="http://img3.wikia.nocookie.net/__cb20110428173444/denaruto3/de/images/thumb/1/19/SasukesVogel01.png/100px-36,717,0,680-SasukesVogel01.png" width="100" height="100" />

<img src="http://img3.wikia.nocookie.net/__cb20110428173444/denaruto3/de/images/thumb/1/19/SasukesVogel01.png/100px-36,717,0,680-SasukesVogel01.png" width="100" height="100" />


<svg width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="35 100,100 100,70 0,0 0">
    </polygon>
  </clipPath>
</svg>

CSS

img{
 /* Firefox */
 clip-path: url("#clipPolygon");
 /*angeblich Safari - Chrome */
 -webkit-clip-path: polygon(35px 100px,100px 100px,70px 0px,0px 0px);
    /* unwichtig */
    display: inline;
    margin: 10px;
}
img:hover{
    -webkit-clip-path: none;
    clip-path: none;
    -webkit-transform: scale(1.1);
    -webkit-transition: transform 1s, clip-path 1s;
    transform: scale(1.1);
    transition: transform 1s, clip-path 1s;
}