CSSで菱形の画像サムネイルを表示し、クリックで元画像を表示させたい

タイトル通りです。
ギャラリーホームページを作っています。
菱形のサムネイルを並べ、クリックしたら元の画像が表示されるようにしたいと思っています。
jQuery？を使えるのが一番なのですが、うまく適用せず、よく分かりませんでした。
CSSでタイトルのような事をするためには、どのようにすればいいでしょうか？

No.1 回答者： ORUKA1951 回答日時： 2015/07/19 19:50

リンクをひし形にするのは無理です。

HTML5の<canvas>要素を使って、javascriptで描画するか、歩くからあるイメージマップを使うかでしよう。

No.2 ベストアンサー 回答者： ごんじろう 回答日時： 2015/07/19 23:19

html

<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
</ul>

css
li{
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
transform: rotate(45deg);
margin: 40px;
float: left;
}
li img{
position: absolute;
width: 250px;
height: 250px;
transform: rotate(-45deg) translate(0%, -120%);
left: 100%;
top: 100%;
}

親で正方形を４５度傾けたマスクを作り
imgで傾いちゃった画像を元に戻し、
rotate(-45deg)
適当な位置に調整しています。
translate(0%, -120%);
left: 100%;
top: 100%;
クリックすれば、リンクに張られたURLが開きます。