test posting

Contoh poating

#gallery { border: 10px solid #1D0C16; height: 300px; width: 800px; margin-left: auto; margin-right: auto; overflow: visible; background: #272229; /* Kotak efek bayangan di Safari dan Chrome*/ -webkit-box-shadow: #272229 10px 10px 20px; /* Kotak efek bayangan di Firefox*/ -moz-box-shadow: #272229 10px 10px 20px; /*Kotak efek bayangan di IE*/ filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10); /* Kotak efek bayangan di Browser yang mendukung, Opera 10,5 pra-alpha release*/ box-shadow: #272229 10px 10px 20px; }   #gallery ul{ /* Posisi isi ul di tengah galeri */ margin-left:-30px; }   #gallery ul li { /* Untuk menciptakan efek yang tepat dengan melayang-layang kita harus menggunakan display inline-tabel Ini akan menampilkan gambar besar di sebelah kanan thumbnail */ list-style:none; display:inline-table; padding:10px; }   /*  Ini adalah pic untuk menampilkan saat efek yang melayang-layang terjadi selama li yang berisi thumbnail */ #gallery ul li .pic{ /* Animasi dengan transisi di Safari dan Chrome */ -webkit-transition: all 0.6s ease-in-out; /* Animasi dengan transisi di Firefox (No supported Yet) */ -moz-transition: all 0.6s ease-in-out; /* Animasi dengan transisi di Opera (No supported Yet)*/ -o-transition: all 0.6s ease-in-out; /* The opacity menjadi 0 untuk menciptakan efek fadeOut*/ opacity:0; visibility:hidden; position:absolute; margin-top:10px; margin-left:-20px; border:1px solid black; /* Kotak efek bayangan di Safari dan Chrome*/ -webkit-box-shadow:#272229 2px 2px 10px; /*Kotak efek bayangan di Firefox*/ -moz-box-shadow:#272229 2px 2px 10px; /* Kotak efek bayangan di IE*/ filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5); /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/ box-shadow:#272229 2px 2px 10px; }   #gallery ul li .mini:hover{ cursor:pointer; }   /* Ini menciptakan efek yang diinginkan menampilkan gambar ketika kita mengarahkan mouse ke thumbnail*/ #gallery ul li:hover .pic { / * Lebar dan tinggi adalah seberapa besar gambar akan pertumbuhan dengan efek * / width:200px; height:200px; opacity:1; visibility:visible; float:right; }

dua

tiga

empat

Related Articles :