Make Zoom Effect Clickable on Image

Keterangan singkat mengenai zoom effect dapat sobat baca kembali make hover zoom effect use css. Di sana diterangkan cara membuat efek bergaya zoom saat cursor didekatkan :)
Koben akan berbagi lagi cara membuat efek zoom dimana proses kerjanya mirip dengan tutorial berikut pop up boxes zoom in effect use css3! Dengan melakukan klik, akan terbukalah gambar dengan efek zoomer ;)
Untuk melihat demo dan gimana zoom yang dihasilkan, gue dapatkan resourcenya dari sini Альбом Pada sumber artikel dibuat versi image gallery sekarang kita buat versi single image :D
Kode CSS

a.zoom {
width: 200px;
height: 141px;
position: relative;
display: inline-block;
border: 5px solid #f5f5f5;
}
a.zoom img {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: absolute;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: 3;
}
a.zoom:focus img {
top: ;
left: ;
width: 250%;
height: 250%;
cursor: default;
position: absolute;
box-shadow: 0 0 15px 2px #000;
z-index: 15;
}
a.zoom:focus {
border: none;
}
:focus{
outline: none;
}

MarkUp HTML<a class="zoom" tabindex="1">
<img src="LINK-IMAGE-HERE.jpg">
</a>Sudah selesai, mau apa lagi coba :P

Pada kode CSS tepatnya pada variabel .zoom:focus img ada dua kode top & left yg belum disisikan dengan nominal. Silahkan isi sesuai dengan kebutuhan. Pada markup HTML (cara pemakaian) terdapat variable tabindex yg mesti ada pada setiap penulisan syntax.