Oke sob,
Langsung aja deh, Cekidot
1. Membuat Border berubah Warna saat Di Hover/Sorot
Kode CSSnya :
.f403_img-efek {Kode HTMLnya :
border:1px solid #fff;
}
.f403_img-efek:hover {
border:1px solid blue;
}
<img class="f403_img-efek" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_Ua51BrBGKBlaLQCA_9_MTz2tDM5ntXXz2KDkPqoz8tHtMyeDsNZqR4bSa4FK-gU5Eq1yvL5LO-iJs9mhsNkHUDfQIdJaGgv-g4V8_rCdQCGgQSMTuT1T7PxcUlOgB4E3V0Xcm2xCQ_z/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{HTML :
border:5px solid #ccc;
}
.f403_img-efek-2:hover {
background-color:blue;
border:5px solid #ddd;
}
<img class="f403_img-efek-2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_Ua51BrBGKBlaLQCA_9_MTz2tDM5ntXXz2KDkPqoz8tHtMyeDsNZqR4bSa4FK-gU5Eq1yvL5LO-iJs9mhsNkHUDfQIdJaGgv-g4V8_rCdQCGgQSMTuT1T7PxcUlOgB4E3V0Xcm2xCQ_z/s1600/main-logo.png" />
Demo :

3. Dashed Border Image
CSS :
.f403_img-efek-3 {HTML :
border:2px solid #ccc;
}
.f403_img-efek-3:hover {
border:2px dashed #000;
}
<img class="f403_img-efek-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_Ua51BrBGKBlaLQCA_9_MTz2tDM5ntXXz2KDkPqoz8tHtMyeDsNZqR4bSa4FK-gU5Eq1yvL5LO-iJs9mhsNkHUDfQIdJaGgv-g4V8_rCdQCGgQSMTuT1T7PxcUlOgB4E3V0Xcm2xCQ_z/s1600/main-logo.png" />
Demo :

4. Dotted Image Border
CSS :
.f403_img-efek-4 {HTML :
border:2px solid #ccc;
}
.f403_img-efek-4:hover {
border:2px dotted #000;
}
<img class="f403_img-efek-4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_Ua51BrBGKBlaLQCA_9_MTz2tDM5ntXXz2KDkPqoz8tHtMyeDsNZqR4bSa4FK-gU5Eq1yvL5LO-iJs9mhsNkHUDfQIdJaGgv-g4V8_rCdQCGgQSMTuT1T7PxcUlOgB4E3V0Xcm2xCQ_z/s1600/main-logo.png" />
Demo :

5. Auto Zoom Image with Shadow Color
CSS :
.f403_img-efek-5 {HTML :
-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);
<img class="f403_img-efek-5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_Ua51BrBGKBlaLQCA_9_MTz2tDM5ntXXz2KDkPqoz8tHtMyeDsNZqR4bSa4FK-gU5Eq1yvL5LO-iJs9mhsNkHUDfQIdJaGgv-g4V8_rCdQCGgQSMTuT1T7PxcUlOgB4E3V0Xcm2xCQ_z/s1600/main-logo.png" />Demo :

6. Membuat Gambar Berputar saat di Sorot/Hover