◄ Min  Size Fonts: + | - | ± Color: Max ►

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.
Loading...
XMake Zoom Effect Clickable on Image
Membuat efek zoom memakai css3 dengan proses di klik
Subscribe my posts Register For Free!

4 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE