SVG rotate image fill on hover

Question

I have a svg mask that rotate clockwise on hover with a picture fill inside. I would like the picture to rotate counter-clock wise to compensate the rotation of the shape on hover.

My issue is that the picture goes out of the shape instead when hover. I tried to have an overflow:hidden but it doesn't work.

Here is my jsfiddle : http://jsfiddle.net/nyb5wffv/1/

#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);
}

Answer 1

Instead of rotating the whole SVG and then trying to do the reverse rotation on the image, just rotate the hexagon. The polygon (and thus the clipPath) will be rotated, but the image will be unaffected.

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

    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform: 50% 50%;
}

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

Demo fiddle here