We left off learning about the various positions in CSS. In this tutorial we will cover the pseudo classes and pseudo elements, which allow us to add special effects to our selectors. An example would be roll-over effects on hyperlinks, or making the first letter of a sentence larger and a different color than the rest of the text.
CSS: Pseudo - A Preview of Mouse-over Effects (Page 4 of 4 )
We can also create certain mouse-over effects in CSS, displaying a special effect when someone hovers over an image. Below we will change the opacity of an image when the user hovers over a picture of a gorilla or clicks on it:
There are many different ways to affect images using the CSS filters, and while we will preview some of them here, we will cover them in even greater detail in our next article.
In our next example, we will preview the blur effect. When the user hovers over the gorilla picture, it will become blurred:
We can of course start the image out inverted and show the image as normal when the user hovers over it:
<html>
<head>
<style type="text/css">
a:link img
{filter:invert;}
a:visited img
{filter:invert;}
a:hover img
{filter:none;}
</style>
</head>
<body>
<h1>Guess what this image is...Hover over it to see if you were right!</h1>
<a href="http://www.devshed.com">
<img src="klematis.jpg" width="150" height="150">
</body>
</html>
Well that's all the time we have for this episode. Be sure to join us next time when we go in-depth on working with images, creating a gallery, and applying filters to your photos.
Till then...
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
Style Sheets 
/ 4 
HTML5 Boilerplate Introduction
