How to Highlight an IMG
Image mouse-over effects can be used to spice up a website's appearance and draw a user's attention to a particular image. CSS code, in conjunction with HTML, can be used to highlight an image via the "opacity" property. When this property is applied to the "IMG" tag, the image will appear slightly grayed-out until the user positions the mouse cursor over the image, giving it a "highlight" effect. Adding this feature to the existing images on your webpage is a relatively simple process that only takes minutes to do.
Other People Are Reading
Instructions
-
-
1
Open the HTML page that contains the image you want to highlight in an HTML editor.
-
2
Locate the HTML code that contains the image you want highlighted. The code may appear as <img border="0" src="test.gif"> in most cases. Add <a class="highlightit"> in front of the image tag and </a> behind it. If you want to add a link to the highlighting, add href="http://www.example.com/" inside of the <a> tag. The end result should appear as the following: <a href="http://www.example.com/" class="highlightit"><img border="0" src="test.gif"></a>
-
-
3
Enter the following CSS code into the CSS header within the HTML page or open the CSS file inside the HTML editor and add the code. Save the files when finished.
.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
-
1
