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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/s1600/main-logo.png" />

Demo :



6. Membuat Gambar Berputar saat di Sorot/Hover