Transparent Images

Here’s a fairly simple css trick that I plan on using to spice up my photo project: making images transparent until you mouse over them. It’s actually pretty easy to do, and there are ways to make it work on really old, really terrible browsers (*cough* IE6 *cough*). There are two basic steps to making these images. First, you have to make the image transparent. Then you have to add a little code to change the image when a user mouses over it.

The code you add for modern browsers is simply:

img
{
opacity:0.3;

}

The values for opacity that you use range from 0.0 to 1.0. (1.0 being an unchanged image, 0.0 being an invisible image.) To make your pics work with older browseres you can use the line:

filter:alpha(opacity=30);

Here 100 is the equivalent of 1.0 in the first example.

Now you need to add the cool mouse-over effect. Make a copy of the previous code and add (:hover) to the image line. Now change the opacity value to 1.0 or 100. Now you’re already done. That was easy.

Be sure to check my website on Friday to see this code in action. Or you could always try it yourself. There are also ways of adding text over the transparent image. That’s not something I plan on using in my website, but you can check it out at the site where I found this code: http://www.w3schools.com/css/css_image_transparency.asp. You can also check out the examples which I didn’t post because you wouldn’t be able to see the mouse-over effect in a static image. Check it out. Happy coding!

 

 

 

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s