<!DOCTYPE html>
	<html>
		<head>
			<title>Image Hover Transparent using Opacity</title>
		</head>
		<body>
			
			 <style type="text/css">
				img {
					opacity: 0.3;
					filter: alpha(opacity=50);
					}
				img:hover {
						opacity: 1.0;
						filter: alpha(opacity=100); /* For IE8 and earlier */
					}
				.img_1 {
					opacity: 0.6;
					filter: alpha(opacity=50);
					}
			    .img_1:hover {
						opacity: 1.0;
						filter: alpha(opacity=100); /* For IE8 and earlier */
					}
			 </style>
			 
			 <img src="images/background_images.jpg" alt="Image Hover Transparent">
			 <img class="img_1" src="images/background_images.jpg" alt="Image Hover Transparent">
			  
		</body>
	<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0084'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>

Output :

Topic :Image Hover Transparent