Dstars - Komunitas Cyber Indonesia

You are not connected. Please login or register

Kumpulan efek hover gambar dengan CSS3

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Kumpulan efek hover gambar dengan CSS3 on Wed 12 Sep 2012, 05:19

Cara Memasang efek Gambar
sebenarnya efek ini sangat menggangu pengunjung yang sedang membaca postingan kita. Tetapi mungkin diantara para blogger menyukai efek ini, silahkan arahkan mouse anda pada gambar disamping untuk melihat efek ini, dan bagi yang suka efek ini ikuti langkah berikut.

Login blogger
Pergi ke Edit HTML
Beri ceklist pada Expand Widget Templates
Cari kode CSS .post img dan .post img:hover, bila ada kode tersebut ganti/replace dengan kode yang saya siapakan dibawah. Tapi bila tidak ada kode seperti diatas, tinggal paste'kan saja diatas kode ]]></b:skin>


gambar bergoyang:
.post img {
box-shadow: 0 3px 6px rgba(0,0,0,.25);
transform: rotate(+2deg);
-o-transform: rotate(+2deg);
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.post img:hover {
box-shadow: 0 3px 6px rgba(0,0,0,.5);
transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

gambar membesar:

.post img {
height:auto;
transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}



gambar berbayang:

.post img {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.post img:hover {
box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}

gambar berubah bentuk:

.post img {
border-radius: 30px 0 30px 0;
-moz-border-radius: 30px 0 30px 0;
-webkit-border-radius: 30px 0 30px 0;
-o-border-radius: 30px 0 30px 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.post img:hover {
box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0;
}



gambar berputar:

.post img{
transition:all 1.2s ease-out;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}
.post img:hover {
z-index:99;
transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-moz-transform:rotate(360deg) scale(2) translate(1px,-3px);
-webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}



View user profile

2 Re: Kumpulan efek hover gambar dengan CSS3 on Sun 06 Jan 2013, 18:58

RevoJr


Moderator
Moderator
Bagus nih tips, yang ane cari gambar berputar akhirnya ketemu juga

View user profile http://finziinside.blogspot.com/

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum