8/4/13

CSS Image Opacity / Transparency

Search w3schools.c Select Language HOME HTML C SS JAVASC RIPT JQUERY XML ASP.NET PHP SQL MORE...
R EFER ENC ES | EXAMPLES

Get Certified
Study Web Technologies and get a diploma at w3schools.com

CSS Basic
CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To

CSS Image Opacity / Transparency

Previous
Creating transparent images with CSS is easy. Note: The CSS opacity property is a part of the W3C CSS3 recommendation.

Next Chapter

CSS Styling
Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables Creating transparent images - Hover effect Creating a transparent box with text on a background image

Try it Yourself - Examples

CSS Box Model

CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding

Example 1 - Creating a Transparent Image

The CSS3 property for transparency is opacity. First we will show you how to create a transparent image with CSS. Regular image:

CSS Advanced
CSS Grouping/Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attribute Selectors CSS Summary Look at the following CSS: The same image with transparency:

CSS Examples
CSS Examples CSS Quiz CSS Certificate

i m g { o p a c i t y : 0 . 4 ; f i l t e r : a l p h a ( o p a c i t y = 4 0 ) ;/ *F o rI E 8a n de a r l i e r* / }
IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent. IE8 and earlier use filter:alpha(opacity=x) . The x can take a value from 0 - 100. A lower value makes the element more transparent.

CSS References
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX

Example 2 - Image Transparency - Hover Effect

Mouse over the images:

The CSS looks like this:

i m g { o p a c i t y : 0 . 4 ; f i l t e r : a l p h a ( o p a c i t y = 4 0 ) ;/ *F o rI E 8a n de a r l i e r* / } i m g : h o v e r { o p a c i t y : 1 . 0 ; f i l t e r : a l p h a ( o p a c i t y = 1 0 0 ) ;/ *F o rI E 8a n de a r l i e r* / }
The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a

www.w3schools.com/css/css_image_transparency.asp

1/3

8/4/13

CSS Image Opacity / Transparency

user hover over one of the images. In this case we want the image to NOT be transparent when the user hover over it. The CSS for this is: opacity=1 . IE8 and earlier: filter:alpha(opacity=100) . When the mouse pointer moves away from the image, the image will be transparent again.

Example 3 - Text in Transparent Box

This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.

The source code looks like this:

< h t m l > < h e a d > < s t y l e > d i v . b a c k g r o u n d { w i d t h : 5 0 0 p x ; h e i g h t : 2 5 0 p x ; b a c k g r o u n d : u r l ( k l e m a t i s . j p g )r e p e a t ; b o r d e r : 2 p xs o l i db l a c k ; } d i v . t r a n s b o x { w i d t h : 4 0 0 p x ; h e i g h t : 1 8 0 p x ; m a r g i n : 3 0 p x5 0 p x ; b a c k g r o u n d c o l o r : # f f f f f f ; b o r d e r : 1 p xs o l i db l a c k ; o p a c i t y : 0 . 6 ; f i l t e r : a l p h a ( o p a c i t y = 6 0 ) ;/ *F o rI E 8a n de a r l i e r* / } d i v . t r a n s b o xp { m a r g i n : 3 0 p x4 0 p x ; f o n t w e i g h t : b o l d ; c o l o r : # 0 0 0 0 0 0 ; } < / s t y l e > < / h e a d > < b o d y > < d i vc l a s s = " b a c k g r o u n d " > < d i vc l a s s = " t r a n s b o x " > < p > T h i si ss o m et e x tt h a ti sp l a c e di nt h et r a n s p a r e n tb o x . T h i si ss o m et e x tt h a ti sp l a c e di nt h et r a n s p a r e n tb o x . T h i si ss o m et e x tt h a ti sp l a c e di nt h et r a n s p a r e n tb o x . T h i si ss o m et e x tt h a ti sp l a c e di nt h et r a n s p a r e n tb o x . T h i si ss o m et e x tt h a ti sp l a c e di nt h et r a n s p a r e n tb o x . < / p > < / d i v > < / d i v > < / b o d y > < / h t m l >
First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. The "transbox" div have a fixed width, a background color, and a border - and it is transparent. Inside the transparent div, we add some text inside a p element.

Related Searches: CSS Templates AJAX Programming Learn PHP Create HTML Create HTML Pages W eb Design Templates Free HTML Tutorial Learn Basic HTML

Previous

Next Chapter

22,756,521 Sites Built with Wix. Create yours today!

Click here to make a stunning website for Free. Wix.com offers an easy-to-use online platform that enables anyone to design and publish professional, beautiful websites for free. With total design control, eCommerce features and superior search engine results, Wix offers a complete solution for launching an exquisite website while saving tons of money.

Altova XMLSpy - The industry's leading XML editor!

www.w3schools.com/css/css_image_transparency.asp

2/3

8/4/13

CSS Image Opacity / Transparency

Whether you're new to XML or already an advanced user, the user-friendly views and powerful entry helpers, wizards, and debuggers in XMLSpy are designed to meet your XML and Web development needs from start to finish. New features in Version 2013! XML editor Graphical XML Schema / DTD editors Smart Fix XML validation with automatic error correction XSLT 1.0/2.0 editor, debugger, profiler XQuery editor, debugger, profiler XBRL validator, taxonomy editor, taxonomy wizard New! Chart creation for XML data Support for Office Open XML (OOXML) Graphical WSDL 1.1/2.0 editor & SOAP debugger JSON editing & conversion Java, C#, C++ code generation 32-bit and 64-bit versions HTML5 and CSS3 support Download a free trial today!

Try it now!

W3Schools' Online Certification

The perfect solution for professionals who need to balance work, family, and career building. More than 10 000 certificates already issued!

Get Your Certificate

The HTML Certificate documents your knowledge of HTML. The HTML5 Certificate documents your knowledge of advanced HTML5. The CSS Certificate documents your knowledge of advanced CSS. The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM. The jQuery Certificate documents your knowledge of jQuery. The XML Certificate documents your knowledge of XML, XML DOM and XSLT. The ASP Certificate documents your knowledge of ASP, SQL, and ADO. The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picke

Statistics

Browser Stat Browser OS Browser Disp

RE P O RT E RRO R

HO ME

TO P

P RI N T

FO RU M

A BO U T

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

www.w3schools.com/css/css_image_transparency.asp

3/3