Highlight an Image on Mouseover
If you’re looking for a way to spice up your website, this highlight an image on mouseover CSS tip may be just what you’re looking for. You can use CSS to highlight an image when you place your mouse over it.
This CSS tip provides a great way to highlight your navigational buttons or whatever you’d like.
Example:
Place your mouse pointer over the above image.
Place the following CSS code within your stylesheet or embed it within your CSS coding between the HEAD tags within your HTML:
.highlight img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.highlight:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
Style Sheet
When using a style sheet, you will need to place the above CSS code within a plain text editor, save the file as style.css and upload it to your server where you store your HTML files.
To use the style, you will need to link to your style.css file within your HTML between your <head> and </head>tags like this:
<html>
<head>
<title>Your Page Title</title>
<link rel=stylesheet href="http://www.yourdomain.com/style.css" type="text/css">
</head>
<body>
Page Content
</body>
</html>
Change the http://www.yourdomain.com in the above code to your domain name.
You can link to your style sheet within as many of your pages as you would like.
Embedded CSS Code
When using embedded code, place the following code within the HTML portion of your web page between the <head> and </head> tags.
<style>
<!–
.highlight img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.highlight:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
//–>
</style>
This concludes the highlight an image on mouseover code.
Visit the following pages for a wealth of copy and paste codes and tips:
HTML Tips
Copy and paste special effect HTML codes for your web page.
HTML Codes
An HTML codes chart you can use to copy and paste codes into your web page.
HTML Color Codes
An HTML color codes chart you can use to copy and paste color codes into your web page.
JavaScript Codes
Copy and paste special effect JavaScript codes for your web page.
Web Design Tips
Tips, tricks, and special effect codes for your web page.
HTML Tags
A list of HTML tags.
HTML 5 Tags
A list of the latest HTML tags to be developed.
ASCII Codes
Special text characters and code for your web page.