S Y A Z W A N I T Y P I N G
Follow here


1 2 3 4 5 6
Tutorial : Image Hover ON Tuesday, December 11, 2012 AT 1:48 PM

Assalamualaikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,image hover tu apa ?okie cuba halakan cursor dekat image di atas tue ,taraaa ia betukar kan ?so itulah image hover ,image hover ada banyak patter zoom lah ,senget lahh ,so buat ikut step by step .

Classic Template/Blogskin users  
  1. Dashboard > Template
  2. Tekan Ctrl +f dan cari code </style> atau <style>
  3. Padam Semua kod img {  and img:hover{
Template Designer Users
  1.  Dashboard > Design > Edit HTML > Tick Expand Widget Templates
  2.  Tekan Ctrl+f dan cari code  /* Header
  3.  Padam Semua kod img {  and img:hover{
  4.  Sekarang copy code dekat bawah ni
Sini kami bagi banyak pilihan kod ,ada untuk terang ,ada menyeget ,but pilih satu sahaja .
/*------ IMAGE ANIMATION------*/
img, a img { border: 0px;  opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }
img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }
Gambar jadi melengkung
img {
border-radius:10px;
opacity:0.6;
-webkit-transition-duration:2.5s;
}
img:hover{
border-radius:30px;
opacity:10.8;
-webkit-transition-duration:2.5s;
}
img {
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}
img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}
img {
border-radius:10px;
border:none;
}
img:hover {
filter:Alpha(Opacity=50,FinishOpacity=0,Style=0);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
padding-left: 160px;
-webkit-transition: 1.5s;
-webkit-transform: rotate(6deg);
}
/*------ IMAGE ANIMATION------*/
img, a img {
filter: none;
-webkit-filter: grayscale(0);}
.photo img {
opacity:1;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}
img:hover, a:hover img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}                             
5.  Lepas tu paste di atas code </style> or  /* Header
6. Preview dan save

Labels:


0Letter


Older Post | Newer Post