Rotated square as link w/ hover effect

by BramVanroy

HTML

<a href="#" title="Profile of Banana"><span style="background-image: url(http://s5.favim.com/orig/52/portrait-sigma-50mm-f1.4-hsm-canon-eos-5d-mk2-face-Favim.com-473053.jpg);">Queen Elizabeth</span></a>

CSS

*, *:before, *:after {box-sizing: border-box;}

html {height: 100%;}
body {min-height: 100;}

a {
    display: inline-block;
    width: 200px;
    height: 200px;
    transform: rotate(45deg) translate(50%);
    position: relative;
    overflow: hidden;
    box-shadow: none;
}
a:after {
    content: "";
    display: block;
    width: 192px;
    width: -webkit-calc(100% - 8px);
    width: calc(100% - 8px);
    height: 192px;
    height: -webkit-calc(100% - 8px);
    height: calc(100% - 8px);
    border: 2px solid white;
    position: relative;
    z-index: 10;
    top: 4px;
    left: 4px;
    transition: all 800ms;
}
a > span {
    display: block;
    height: 141.42%;
    width: 141.42%;
    top: 0;
    left: 0;
    position: absolute;
    background-size: cover;
    background-position: center;
    transform: rotate(-45deg) translateX(-50%);
    transform-origin: 0 0;
    
    box-shadow: inset 0 -50px 50px rgba(0,0,0,0.3), inset 25px 60px 75px rgba(236, 229, 180, 0.48);
    
    text-indent: 142%;
    white-space: nowrap;
    overflow: hidden;
    
    transition: all 400ms;
}
a:hover:after {
    width: 204px;
    height: 204px;
    top: -2px;
    left: -2px;
    box-shadow: inset 0 0 18px black;
}
a:hover > span {
    -webkit-filter: blur(3px);
    filter: blur(3px) ;
    
    transform: scale(1.2) rotate(-45deg) translate(-50%,-10%);
    
    opacity: 0.9;
}