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:
<html>
<head>
<style type="text/css">
img
{
-moz-opacity:0.4;filter:alpha(opacity=100);"
}
</style>
</head>
<body>
<h1>Hover or click on the images...</h1>
<img src="gorilla.jpg" width="150" height="115" alt="Gorilla"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=50"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=100"
onmousedown="this.style.MozOpacity=0.4;this.filters.alpha.opacity=0" />
<img src="girlrilla.jpg" width="150" height="115" alt="Girlrilla"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=50"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=100"
onmousedown="this.style.MozOpacity=0.4;this.filters.alpha.opacity=0" />
</body>
</html>
We can of course do the opposite, and have the image appear hazy first, then vibrant when the user hovers or clicks on it:
<html>
<head>
<style type="text/css">
img
{
-moz-opacity:0.4;filter:alpha(opacity=50);"
}
</style>
</head>
<body>
<h1>Hover or click on the images...</h1>
<img src="gorilla.jpg" width="150" height="115" alt="Gorilla"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=50-"
onmousedown="this.style.MozOpacity=0.4;this.filters.alpha.opacity=75" />
<img src="girlrilla.jpg" width="150" height="115" alt="Girlrilla"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=50"
onmousedown="this.style.MozOpacity=0.4;this.filters.alpha.opacity=75" />
</body>
</html>
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:
<html>
<head>
<style type="text/css">
a:hover img {filter: blur(add = 0, direction = 200, strength = 10)}</style>
</head>
<body>
<h1>Hover over the image to make it all blurry-like</h1>
<a href="http://www.developershed.com">
<img src="gorilla.jpg" width="150" height="150"/>
</a>
</body>
</html>
Another filter is the Invert, which, in this case, inverts the color of your image:
<html>
<head>
<style type="text/css">
a:link img
{filter:none;}
a:hover img
{filter:invert;}
</style>
</head>
<body>
<h1>Inverting Your Image Colors</h1>
<a href="http://www.devshed.com">
<img src="gorilla.jpg" width="150" height="150" alt="Gorilla">
</body>
</html>
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. |
