Kumpulan Efek Gambar Dengan CSS

Banyak Sekali Image EFek pake CSS, Tapi saya mau share beberapa aja ya, kalo kurang Komentar Aja, ntar saya Tanggapi .
Oke sob,
Langsung aja deh, Cekidot

1. Membuat Border berubah Warna saat Di Hover/Sorot
Kode CSSnya :
.f403_img-efek {
border:1px solid #fff;
  }
.f403_img-efek:hover {
border:1px solid blue;
  }
Kode HTMLnya :
<img class="f403_img-efek" src="http://3.bp.blogspot.com/-mQJ7HU3hTgg/TvJ1Fk9GmXI/AAAAAAAAAL4/MD5BX5_smrE/s1600/main-logo.png" />
Keterangan :
1. Kode warna Merah adalah Kode Panggilan Script
2. Kode Warna Biru adalah URL Gambar Kalian
Demo :


2. Mengubah Background dan Border berubah Warna
CSS :
 .f403_img-efek-2{
border:5px solid #ccc;
  }
.f403_img-efek-2:hover {
  background-color:blue;
border:5px solid #ddd;
  }
 HTML : 
<img class="f403_img-efek-2" src="http://3.bp.blogspot.com/-mQJ7HU3hTgg/TvJ1Fk9GmXI/AAAAAAAAAL4/MD5BX5_smrE/s1600/main-logo.png" />

Demo :


3. Dashed Border Image
CSS :
.f403_img-efek-3 {
border:2px solid #ccc;
  }
.f403_img-efek-3:hover {
border:2px dashed #000;
  }
HTML :
<img class="f403_img-efek-3" src="http://3.bp.blogspot.com/-mQJ7HU3hTgg/TvJ1Fk9GmXI/AAAAAAAAAL4/MD5BX5_smrE/s1600/main-logo.png" />

Demo :



4. Dotted Image Border

CSS :
.f403_img-efek-4 {
border:2px solid #ccc;
  }
.f403_img-efek-4:hover {
border:2px dotted #000;
  }
HTML :
<img class="f403_img-efek-4" src="http://3.bp.blogspot.com/-mQJ7HU3hTgg/TvJ1Fk9GmXI/AAAAAAAAAL4/MD5BX5_smrE/s1600/main-logo.png" />

Demo :


5. Auto Zoom Image with Shadow Color

CSS :
    .f403_img-efek-5 {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    margin: 0 10px 5px 0;
    position: relative;
    padding: 3px;
    width: 125px;
    height: 125px;
    -moz-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(-15deg);
    }


    .f403_img-efek-5:hover{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    box-shadow:0px 0px 10px blue;
    -webkit-box-shadow:0px 0px 10px blue;
    -moz-box-shadow:0px 0px 10px blue;
    opacity: 1;
    z-index: 2;
    position: relative;
    -moz-transform: rotate(0deg);
    -moz-transform: scale(1.25);
    -webkit-transform: rotate(0deg);
    -webkit-transform: scale(1.25);
HTML :

<img class="f403_img-efek-5" src="http://3.bp.blogspot.com/-mQJ7HU3hTgg/TvJ1Fk9GmXI/AAAAAAAAAL4/MD5BX5_smrE/s1600/main-logo.png" />
Demo :



6. Membuat Gambar Berputar saat di Sorot/Hover

6 ... Skip ke Kotak Komentar

31 Januari 2012 12.34

wahhh...abang hebat tuh soal css...ane gak bisa hehehehe... ntar saya contek ya bang

31 Januari 2012 14.17

Keduax... Wah mantab tutorialnya sob... izin nyimak maaf baru mampir :)
Absen siang

31 Januari 2012 15.04

@Kang Farhan : gk hebat kok, saya hanya share yang saya bisa aja, :D
@Black Angel : iya sob ..

31 Januari 2012 16.43

biar otomatis langsung di post taruhin css nya di .post img
atau bisa tambahin kodenya di skin blog

.post img{ code cssnya blablabla...}

udah deh enak, gak usah ngetik classnya sob.. :)

wah dengan efek ini, blog kita makin keren dan canggih :)

1 Februari 2012 17.42

@Alam : namanya juga tutor sob,
@PS2 : iya sob ..

Tambahkan Komentar Anda

Peraturan :
1. Dilarang berkomentar dengan kata-kata yang kotor, Pornografi, SARA
2. Dilarang Poskan Spam
3. Dilarang poskan URL yang tidak perlu
Sekian Pemberitahuan Dari Saya
Hati-hati dengan Komentar Anda, anda Komentar Bukan Spam, Saya Pasti akan Follow anda, This Blog Dofollow

 
Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
Original Template By Belajar SEO Blogspot - Himajiesized By Dayz Hidayat - Converted By [./Forbiden-403]