WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Image Opacity /Transparency


Creating transparent images with CSS is easy.

The CSS opacity property is a part of the CSS3 recommendation.


The transparency of attributes in CSS3 is opacity .

First, we will show you how to create a transparent image with CSS.

Normal image

klematis

The transparency of attributes in CSS3 is opacity .

First, we will show you how to create a transparent image with CSS.

Normal image

honeyeater-winged creature

Look at the accompanying CSS:

Example

img { opacity:0.4; filter:alpha(opacity=40); /* IE8 And earlier*/ }
Try it yourself »

IE9, Firefox, Chrome, Opera, and Safari browsers use the transparency property to make images opaque. Opacity property values range from 0.0-1.0. Smaller values make the element more transparent.

IE8 and earlier use filters: alpha (opacity = x). The values that x can take are from 0-100. Lower values make the element more transparent.


Example 2 - Image Transparency - Hover Effect

Mouse over the images:

klematis klematis

The CSS looks like this:

Example

img { opacity:0.4; filter:alpha(opacity=40); /* IE8 And earlier*/ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 And earlier*/ }
Try it yourself »
The first CSS block is similar to the code in Example 1. In addition, we have added what happens when the user hovers the mouse over one of the images. In this case, when the user hovers the mouse over the image, we want the picture to be clear. This CSS is: opacity = 1. IE8 and earlier use: filter: alpha (opacity = 100). When the mouse pointer moves away from the image, the image regains transparency.

Example 3-text in a transparent box

The text is in a transparent box. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes.


The source code is as follows:

Example

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style>
div.background { width:500px; height:250px; background:url(https://www.runoob.com/images/klematis.jpg) repeat; border:2px solid black; } div.transbox { width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; opacity:0.6; filter:alpha(opacity=60); /* IE8 And earlier */ } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; }
</style> </head> <body> <div class="background"> <div class="transbox"> <p>The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. The text is in transparent boxes. </p> </div> </div> </body> </html>
Try it yourself »
First, we create a div element of fixed height and width with a background image and border. Then we create a smaller div element inside the first div. This div also has a fixed width, background color, border-and it's transparent. Inside the transparent div, we add some text inside the P element.