CSS Image Transparency
Learn how to change image transparency (opacity) using only CSS code. Simple but useful technique that you can use to create nice looking gallery or just crossover effect.
Here is how it looks like…
Changing image opacity (transparency) using css :
Image opacity wih different crossover effect (move your cursor over it) :
So let’s get started. First create a new HTML document (index.html), create folder “style” and inside it create our CSS file (style.css).
Our basic HTML file looks like this :
<html> <head> <title>CSS Image Transparency | Designers-Chair.com</title> <link href="style/style.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Tag title defines page name :
<title>CSS Image Transparency | Designers-Chair.com</title>
This is the path to our external CSS file :
<link href="style/style.css" rel="stylesheet" type="text/css">
Body is empty so nothing will be displayed when we open our HTML file in web browser. Now we are going to display our picture.
... <body> <img src="DClogo.jpg" width="145" height="115" alt="DC Logo"/> </body> ...
Now we see the picture but there is no transparency. Open style.css and add the following code :
img
{
opacity:0.5;
filter:alpha(opacity=50);
}
Notice how we have two same properties for img tag. This is because Internet Explorer uses filter:alpha(opacity:x) function (x = 0-100), but Firefox and Crome use opacity:x (x = 0-1). 0 = invisible, 1/100 = 100% visible.
Crossover effect is now easy to do. We just need to add onmouseover and onmouseout.
... <img src="DClogo.jpg" width="145" height="115" alt="DC Logo" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" /> ...
You can also use hover function (instead of onmouseover, onmouseout) , just add it to style.css. Note that this technique does not work with IE 6 (:hover is supported only on <a> elements).
img
{
opacity:0.5; /*Firefox & Chrome*/
filter:alpha(opacity=50); /* IE */
}
img:hover
{
opacity:1; /*Firefox & Chrome*/
filter:alpha(opacity=100); /* IE */
}
That’s it! Simple but very useful and attractive.
12 Comments »
RSS feed for comments on this post. TrackBack URL
Leave a comment
more dc
That’s great !, i like it, what a simple css code can improve view!! please care to email me if there is new another trick like this css one. I’m newbie in webdesign.
nice tutorial but why dont you just use the :hover function instead of mouseout and mouseover ?
murks
I’ve completely forgotten about it
Added to tutorial, thanks!
Hi,
This is nice example.i tried to do exactly what u have shown.But iam using .net 2005.I have created external css file in which i dont have option of opacity at all.could you please let me know what do.
Thank you
Sorry rigney, i wrote this in Notepad++ so i can’t help you. I don’t have VS2005 installed on my computer. Just try to write it in Notepad or some other text editor, you don’t need VS for that.
Nice effect, BTW :hover doesn’t work to well in IE 6- if you want it to work right in that *cough* browser
[...] Click Here to see the Tutorial [...]
It looks very straightforward but I get errors in my stylesheet with both filter and opacity. I am using visual studio 2008, dotnet 3.5, IE8 and FF3. Any ideas what could be wrong please
Can’t help you there mate. I use Notepad++ for developing, not VS.
Other people had problems with VS also, don’t know why.
[...] CSS Image Transparency [...]
[...] CSS Image Transparency Tutorial [...]
very nice tutorial for image opcity its good