Resimlere Şeffaf Hover Efektler Vermek

Blogger Resimlere Tepki Kodu Eklemek

Şimdi üsteki resmin üzerine mause ile gelince canlansın


https://www.webkenti.net

<a target="_self" href="http://webseyyahi.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5d_iXojAXV0RNe9g_G3TGT24g7ITl1wx9ZGJ3KQOMEk7YJtE8v2UqFh9Ft2PwvDrCop7WM0T-inK8_p_C-ULpAQrZ6LCbbUIKkjY_7JqxUMSnfFmSs2PqeL-mArDxzFZgaYwKUEAJ59c/s320/kalp.jpg" style="opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>

Yada tam tersi olsun

<a target="_self" href="http://webseyyahi.blogspot.com/">
  <img onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0" style="opacity: 1;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5d_iXojAXV0RNe9g_G3TGT24g7ITl1wx9ZGJ3KQOMEk7YJtE8v2UqFh9Ft2PwvDrCop7WM0T-inK8_p_C-ULpAQrZ6LCbbUIKkjY_7JqxUMSnfFmSs2PqeL-mArDxzFZgaYwKUEAJ59c/s320/kalp.jpg" /></a>

HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.



* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.