Pure CSS3 Fancy Thumbnail Hover Effects

body { padding: 10px 0 0 10px; font:12px Arial, Helvetica, sans-serif; }
a { display:inline-block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:150px; height:150px; -webkit-border-radius:50px;
-moz-border-radius:75px; border-radius:75px; background-image:url(elephant.png); background-repeat:no-repeat; background-origin:border-box; background-position:50% 50%;
border-width:75px; border-color:rgba(0,0,0,0); -webkit-transition:0.5s ease; -moz-transition:0.5s ease; -ms-transition:0.5s ease; -o-transition:0.5s ease;
transition:0.5s ease; }
a:hover { border-width:0; border-color:rgba(255,0,255,0.5); }
a.one { border-style:solid; }
a.two { border-style:dashed; }
a.san { border-style:dotted; }
a.yon { border:75px solid rgba(0,255,255,0.3); }
a.goo { border:75px dashed rgba(255,0,0,0.3); }
a.rok { border:75px dotted rgba(0,0,255,0.3); }
a.ryk { border:75px double rgba(0,255,0,0.3); }
a.yon:hover { border: 1px solid rgba(255,0,255,0.3); }
a.goo:hover { border: 1px dashed rgba(255,255,0,0.3); }
a.rok:hover { border: 1px dotted rgba(0,255,255,0.3); }
a.ryk:hover { border: 1px double rgba(0,0,0,0.3); }
a.x7, a.x8, a.x9 { -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; }
a.x7 { border:75px solid rgba(255,0,255,0.3); }
a.x8 { border:75px dashed rgba(255,0,0,0.3); }
a.x9 { border:75px dotted rgba(255,255,0,0.3); }
a.x7:hover { border: 1px solid rgba(255,0,255,0.3); }
a.x8:hover { border: 1px dashed rgba(255,0,0,0.3); }
a.x9:hover { border: 1px dotted rgba(0,0,0,0.3); }

<H1>Pure CSS3 Fancy Thumbnail Hover Effects</H1>
<br>
<br>


---------------------------------------------IMAGE---------------------------------------------------