KONTAK SAYA

Email Twitter Facebook

TELUSURI

GALERI FOTO

Kategori Arsip Daftar Isi

MULAI DARI SINI

Pelayanan Portfolio Pembayaran

Efek Hover 2


Anda Pengen Seperti Saya Efek Hover yang Puter puter gitu..
caranya Gampang.
Ikuti saja langkah berikut ini:
1. Anda Cari Dulu Kode ]]></b:skin> copykan kode dibawah ini tepat diatas kode   

<style type='text/css'>
.stage {
  margin: 0 auto;width: 210px;height: 140px;
  position: relative;perspective: 1000px;}

#gallery {
  width: 100%;height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  animation: rotation 20s infinite linear;
  -webkit-animation: rotation 20s infinite linear;
  -moz-animation: rotation 20s infinite linear;}

//menghentikan gerak putaran (hover mouse)...
#gallery:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;}

#gallery figure {
  display: block;position: absolute;
  width: 186px;height: 116px;
  left: 10px;top: 10px;
  background: black;overflow: hidden;
  border: solid 5px #666;}

//peletakan serta pengaturan tampilan gambar...
#gallery figure:nth-child(1) {
  transform: rotateY(0deg) translateZ(288px);
  -webkit-transform: rotateY(0deg) translateZ(288px);
  -moz-transform: rotateY(0deg) translateZ(288px);}

#gallery figure:nth-child(2) {
  transform: rotateY(40deg) translateZ(288px);
  -webkit-transform: rotateY(40deg) translateZ(288px);
  -moz-transform: rotateY(40deg) translateZ(288px);}

//teruskan dengan selisih nilai rotateY(40deg) pada gambar berikutnya...
#gallery figure:nth-child(3) { ...}
#gallery figure:nth-child(4) { ...}

img{
   -webkit-filter: grayscale(1);
   cursor: pointer;
   transition: all 1.5s ease;
   -webkit-transition: all 1.5s ease;
   -moz-transition: all 1.5s ease;}

img:hover{
   -webkit-filter: grayscale(0);
    transform: scale(1.2,1.2);
   -webkit-transform: scale(1.2,1.2);
   -moz-transform: scale(1.2,1.2);
   transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);}

@keyframes rotation{
 from {transform: rotateY(0deg)}
 to {transform: rotateY(360deg)}}
</style>
  

 2. Lalu Anda Sekarang copykan dimanasaja sesuai anda inginkankan

   yang penting bersatu dengan kode HTML

 
 

  

<figure><img src="http://URL-Gambar Anda (1).png" alt="..."></figure>
<figure><img src="http://URL-Gambar Anda (2).png" alt="..."></figure>
...
//dan seterusnya...
    </div>
</div>

 Keterangan :


Warna hijau ganti dengan URL Gambar Anda
Yang alt="..." itu isi dengan bacaan yang ingin ditampilkan..



3. Selasai sudah

4. Tinggal Simpan

0 komentar: