Efek Hover 1

Anda Ingin Hover Ketika Diklik Gambar Muncul Gambar Berbeda
Kodenya Di bawah Ini:

Simpan CSSnya Dulu

<style>
#descript a:link {
  color: #990000;}

#descript a:hover {
  text-decoration: none;
  color: #990000;}

#descript a:link span {
  display: none;}

#descript a:hover span {
  position:absolute;
  display: inline;
  margin: 0 0 0 10px;
  -webkit-animation:aniload 3s;
  -moz-animation:aniload 3s;
  -ms-animation:aniload 3s;
  -o-animation:aniload 3s;
  animation:aniload 3s;}


@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}
}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}
}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}
}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}
}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}
}
</style>

 
Lalu Sekarang Simpan Kode HTMLnya dimana Saja Seseuai Anda Inginkan

<div id="descript">
<a href="https://www.blogger.com/blogger.g?blogID=8049220762892332524#">
  </a><br />
<div align="center">
<a href="https://www.blogger.com/blogger.g?blogID=8049220762892332524#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWrD_ByJI_kzWFsSo91Ap1kd7DZ8rPavskv2jbpmk82FJGInLbqHfgYWr0BiBqHPTfh3cwY_HY7j-53aGdihk18q_PQZafDDdCt9LQT7s935EMTMO5-RXDuOMKCucb7DIgXKZN1GTMp8o/s1600/Jewl1CLR.gif" height="80" width="300" /></a></div>
<a href="https://www.blogger.com/blogger.g?blogID=8049220762892332524#">
<img height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVNAx6w2pF7MMH10NIaW9banwtjz74x6S0SZwfsijgzT8281rsPYoFR6YBh2CpWEm83jTQXP0LE8iBWn2YvB1nKWuFzlO3-l12LxFRvbWBjm_O3izuCC7RbM6B7M87cXk8FTVHPeA9_qXL/s125-no/Untitled-1.jpg" width="240" /></a></div>

 Keterangan :
 

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

3. Selasai sudah
4. Tinggal Simpan

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