Tasya's Home: Image Hover Flip

Friday, 30 October 2015

Image Hover Flip


Hai teman! waduh, hari ini Tasya lupa nge-post nih. Biasalah, besok ulangan PKN. Sehari belajar,eh nggak ada yang nyangkut di otak :v
oke,deh, daripada pusing dengerin curhatan Tasya, silahkan klik read more!


cr : kak Nanda


Vertical Flip


  • Denim & simple : Dashboard >> Template >> Edit HTML >> cari code /* Header
  • Paste-kan code dibawah ini diatas code /* Header


img{
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
border-radius: 5px;
}
img:hover{
-webkit-transform: rotatex(360deg) scale(0.8) ;
-moz-transform: rotatex(360deg) scale(0.8);
-o-transform: rotatex(360deg) scale(0.8);
-ms-transform: rotatex(360deg)scale(0.8);
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
box-shadow: 0px 0px 15px pink;
border: 1px solid #eee;
border-radius: 10px;
}



  • Blogskins : Dashboard >> Template >> cari code </style>
  • Paste-kan code tadi diatas code </style>



Horizontal Flip


  • Denim & Simple : Dashboard >> Template >> Edit HTML >> Cari code /* Header
  • Paste-kan code dibawah ini diatas code /* Header


img{
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
border-radius: 5px;
}
img:hover{
-webkit-transform: rotatey(360deg) scale(0.8) ;
-moz-transform: rotatey(360deg) scale(0.8);
-o-transform: rotatey(360deg) scale(0.8);
-ms-transform: rotatey(360deg)scale(0.8);
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
box-shadow: 0px 0px 15px pink;
border: 1px solid #eee;
border-radius: 10px;
}



  • Blogskins : Dashboard >> Template >> cari code </style>
  • Paste-kan code tadi diatas code </style>



Note

Gantikan yang warna merah itu dengan warna yang kamu suka, bisa cari disini
Bagi yang sudah ada image hovernya, silahkan ganti dengan code-code diatas



No comments:

Post a Comment