JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
viewBox="0 0 110.28 130">
    <defs>
        <clipPath id="hexagonal-mask">
            <polygon id="hex" class="path" stroke-width="3" stroke-miterlimit="10" points="55.537,127.59 1.795,96.562 1.795,34.504 55.537,3.475 109.28,34.504 
    109.28,96.562 " />
        </clipPath>
    </defs> 
    
    
    
    
    <a xlink:href="http://labs.sawyerhollenshead.com/lab/svg-clippath/images/brooklyn.jpg">
         <image clip-path="url(#hexagonal-mask)" xlink:href="http://labs.sawyerhollenshead.com/lab/svg-clippath/images/brooklyn.jpg" class="imagepath" height="100%" width="100%" />
        </a>

    <use xlink:href="#hex" fill="none" stroke="#3498db"/>
</svg>

CSS

#hex {
    overflow:hidden;
}

svg {
    padding: 50px;
    width: 200px;
    height: 200px;
    transition: all 0.25s;
}

svg a {
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

svg:hover{
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}

svg:hover a {
    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
}