Home arrow Style Sheets arrow Page 4 - CSS: Pseudo
STYLE SHEETS

CSS: Pseudo


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.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 15
May 19, 2008
TABLE OF CONTENTS:
  1. · CSS: Pseudo
  2. · Dealing with the :first Line Pseudo Element
  3. · Pseudo Classes
  4. · A Preview of Mouse-over Effects

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials