Sometimes you see in the website when you hover over the icon, it is constant change background color or other image. To do so we can easily think of CSS hover for offline use it. But use it how local? Currently this point, but I still do not know 1 how it is used onmouseover onmouseout và.

Start any. All locally using css.
Now we have 1 the image (no background), how hover your mouse over it change the background color?

<img style=" background: green;" 
       onmouseover = "this.style.background='blue';" 
       onmouseout = "this.style.background='green';" 
       src="http://i.imgur.com/Pb9njIR.png" 
  />

The first line originally set background image, second line 2 set the background when you hover over image, current 3 set background image when you hover out. Demo

Follow, want to change the image when you hover over? do the same as above only, but rather by src background image link.

<img src="http://i.imgur.com/Pb9njIR.png"
       onmouseover="this.src='https://i.imgur.com/KDmsF.jpg'"  
       onmouseout="this.src='https://i.imgur.com/Pb9njIR.png'"  
  />

Demo

Similarly, want normal watermark bit, when you hover over the image brighter than we used properties opacity.

<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my facebook" target="_blank" href="https://www.facebook.com/nguyenvanquan7826"><img src="http://i.imgur.com/lLH2kv5s.jpg" alt="facebook" width="50" height="50" /></a>
<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my google+" target="_blank" href="https://google.com/+nguyenvanquan7826"><img src="http://i.imgur.com/u0VhMBcs.jpg" alt="google+" width="50" height="50" /></a>
<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my twitter" target="_blank" href="https://twitter.com/baytamhaisau"><img src="http://i.imgur.com/Op7dTfNs.jpg" alt="twitter" width="50" height="50" /></a>
<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my youtube" target="_blank" href="https://www.youtube.com/user/nguyenvanquan7826"><img src="http://i.imgur.com/9aTlnSks.jpg" alt="youtube" width="50" height="50" /></a>

Unfortunately for them not to use wordpress.com blog like this =)). You know how on how to use wordpress blog to share with people offline.