Here I'm discuss about css imge opticity property on webpage. It's support to different browser like internet explorer , mozila , chrome and opera etc. Use of this property we will create the hover effect on image. Let see the basics of opticty and also see tuts on "How to create simple social hover button use of CSS Image Opticity"
How to creating a teransparent Image?
Regular image show the normal and use the opticity css property to change the transparent effects. Look at see the example and demo.
Look at the following CSS code for this effects for transparency:
img{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}
Note : IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency.
The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.
IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.
How to creating Image Transparency - Hover Effect ?
css code :
- The CSS for this is: opacity=1.
- IE8 and earlier: filter:alpha(opacity=100).
Use this code to create hover effect in image. [Changes the value of opticity 0.0 to 1.0 ] If value of opticity is 1.0 then image in regular format but change the value of opticity lover to 1.o then increase the transparency effects.
img{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}img:hover{opacity:1.0;filter:alpha(opacity=100); /* For IE8 and earlier */}
html code :
<div class="container"> <div class="logo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaZwr2osCVmbPdoUzByEtHcIJWaF4liOUVQs02xAXGyHfoPrDaANWBZ1WrNtRzGj-KPEUVvwHDBMYdRQ7MxBaZXaK1jxO-K2cFAJcI_CClnJylybQFbji1iqvz1WkNAkV7t88DOI6GPnMp/h120/bold.png" alt="b" /> <a href="http://www.digitalhubinc.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaZwr2osCVmbPdoUzByEtHcIJWaF4liOUVQs02xAXGyHfoPrDaANWBZ1WrNtRzGj-KPEUVvwHDBMYdRQ7MxBaZXaK1jxO-K2cFAJcI_CClnJylybQFbji1iqvz1WkNAkV7t88DOI6GPnMp/h120/bold.png" alt="b" /></a> </div></div>
.container { width: 300px; margin: 250px auto;}
.logo { float:left } .logo a { opacity:0.4;filter:alpha(opacity=40); } .logo a:hover { opacity:1.0;filter:alpha(opacity=40); }
How to create simple social hover button use of CSS Image Opticity
simply we are using css and html code to create this social hover. follow this steps and see the demo...
1. Simple Hover effects code : Live Demo
html code :
<div class="container">
<div class="social_icons">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh41q5Wb09Ze_t3ag_sC2em2IBE2JoKyCLAGN9QpFs6zRj2Ed7knprsr9cZc09WY7zdJwMdbqpCQ1_y-NIyUc1URx-v5AXiJgmvYferHzwkJB0ms5Z52KQAcy47AMWx9m5xgVkmEzO5dlDx/h120/dribbble.gif" width="30" height="30" alt="Dribbble" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXclQ2hoeHCg2JDyMJsiKQDnBXxqAMbMZgjqhmcZnK35SWzHtInQV4DJc8wOx2VKPjjyGO9DA-cfsmdvJuIcifew7OwIXL3D0lTmf9qebmOg4mPlntKWDSQJuXlkMZ33rP0xtRdyQRp1jI/h120/facebook.gif" width="30" height="30" alt="Facebook" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJQpgQD6KpbfRxuPr2aWr0vopMXGg8DTg1sWxKukQTrlcaDQUJHQwNOfR_6nls16Xlxc-pjFlxSar3MhqX0F7VcstfLZe_ZJzLOCPbmCslOWd3Ay4yl30oFkAey0ij-XTUEhm9FA93onW/h120/gplus.gif" width="30" height="30" alt="GooglePlus" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0bAOI4_OrVXANTKcFRNFyQelpMu6RlBw7THYAOGvtZ7ZUEhUbZKcHHJV9Cz1I2vP8AYXQuX8hG1qvWTLr5qm5QiisPP41QYhyphenhyphenQLNuWko0-l6UUkc4yk1DGKMJmBM_f7MeGzSvHJDPVr8y/h120/instagram.gif" width="30" height="30" alt="Instagram" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqNk3N-jK7MFbv-5Vnu22RSE3TAqmy3_l3QkphMRPDX3VNOle-sukBiNV9dXwjJ0G7ErEzEbmGFho8gjOXGiO17WgWo5_JSlMoTwlf7Uv1Hb7W2mNZv-hY6Dpp0PUx5bYXAcB-JqgZWul_/h120/linkedin.gif" width="30" height="30" alt="LinkedIn" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5s0QofJDchsOX8a5SwUEyqkF_jaQ5lIxagkStfFORXHDN8CyaAts4oMEYePKlaVPiLm8u1ftOS_jfWzgdz6nx8-UAYtLocaT89vF6E3IQ7kpLtuB7UHOFf2_Z5IN5JlL2atcr8wi0bR-B/h120/pinterest.gif" width="30" height="30" alt="Pinterest" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpUtJ07nJjHwiTJH3Kd05ETXLYzCDD-e9Dyf7RekCGlntglg3N3s_eAi1EHWdl___ul8srigech24_kzn8YK-x9Yifuo4CRcc2sios_5lWxL9MSVOVBDbeQ1CxZiIVl5nvVPORQqIui8C/h120/twitter.gif" width="30" height="30" alt="Twitter" /></a>
</div></div>
css code :
.container { width: 300px; margin: 250px auto;} /*maint content*/.social_icons { float:left } .social_icons a { opacity:0.6; filter:alpha(opacity=60); } .social_icons a:hover {
opacity:1.6; filter:alpha(opacity=600);} .employee_info .social_icons { padding-top:16px; }
#copyright_wrapper .social_icons { float:left; margin-bottom:20px; }
2.final code of hover effects :Live Demo
<html><head><style>.container { width: 300px; margin: 250px auto;} /*maint content*/.social_icons { float:left } .social_icons a { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: .3; } .social_icons a:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .employee_info .social_icons { padding-top:16px; }
#copyright_wrapper .social_icons { float:left; margin-bottom:20px; }</style></head>
<body>
<div class="container"><div class="social_icons">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh41q5Wb09Ze_t3ag_sC2em2IBE2JoKyCLAGN9QpFs6zRj2Ed7knprsr9cZc09WY7zdJwMdbqpCQ1_y-NIyUc1URx-v5AXiJgmvYferHzwkJB0ms5Z52KQAcy47AMWx9m5xgVkmEzO5dlDx/h120/dribbble.gif" width="30" height="30" alt="Dribbble" /></a><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXclQ2hoeHCg2JDyMJsiKQDnBXxqAMbMZgjqhmcZnK35SWzHtInQV4DJc8wOx2VKPjjyGO9DA-cfsmdvJuIcifew7OwIXL3D0lTmf9qebmOg4mPlntKWDSQJuXlkMZ33rP0xtRdyQRp1jI/h120/facebook.gif" width="30" height="30" alt="Facebook" /></a><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJQpgQD6KpbfRxuPr2aWr0vopMXGg8DTg1sWxKukQTrlcaDQUJHQwNOfR_6nls16Xlxc-pjFlxSar3MhqX0F7VcstfLZe_ZJzLOCPbmCslOWd3Ay4yl30oFkAey0ij-XTUEhm9FA93onW/h120/gplus.gif" width="30" height="30" alt="GooglePlus" /></a><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0bAOI4_OrVXANTKcFRNFyQelpMu6RlBw7THYAOGvtZ7ZUEhUbZKcHHJV9Cz1I2vP8AYXQuX8hG1qvWTLr5qm5QiisPP41QYhyphenhyphenQLNuWko0-l6UUkc4yk1DGKMJmBM_f7MeGzSvHJDPVr8y/h120/instagram.gif" width="30" height="30" alt="Instagram" /></a><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqNk3N-jK7MFbv-5Vnu22RSE3TAqmy3_l3QkphMRPDX3VNOle-sukBiNV9dXwjJ0G7ErEzEbmGFho8gjOXGiO17WgWo5_JSlMoTwlf7Uv1Hb7W2mNZv-hY6Dpp0PUx5bYXAcB-JqgZWul_/h120/linkedin.gif" width="30" height="30" alt="LinkedIn" /></a><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5s0QofJDchsOX8a5SwUEyqkF_jaQ5lIxagkStfFORXHDN8CyaAts4oMEYePKlaVPiLm8u1ftOS_jfWzgdz6nx8-UAYtLocaT89vF6E3IQ7kpLtuB7UHOFf2_Z5IN5JlL2atcr8wi0bR-B/h120/pinterest.gif" width="30" height="30" alt="Pinterest" /></a><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpUtJ07nJjHwiTJH3Kd05ETXLYzCDD-e9Dyf7RekCGlntglg3N3s_eAi1EHWdl___ul8srigech24_kzn8YK-x9Yifuo4CRcc2sios_5lWxL9MSVOVBDbeQ1CxZiIVl5nvVPORQqIui8C/h120/twitter.gif" width="30" height="30" alt="Twitter" /></a>
</div></div>
</body></html>
