CSS ImagesTransparency/Opacity

Using CSS, it is easy to create transparent images.

Note:The CSS Opacity property is part of the W3C CSS3 recommendation.

Examples

More Examples

Create Transparent Image - Hover Effect

Create a Transparent Box with Text and a Background Image

Example 1 - Create a transparent image

The CSS3 opacity property isopacity。

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

Normal Image

klematis

The same image with transparency:

klematis

See the CSS below:

img { opacity:0.4; filter:alpha(opacity=40); /*IE8 and Earlier Versions*/ }

IE9, Firefox, Chrome, Opera, and Safari use the opacity property to make images transparent. The opacity property value ranges from 0.0 to 1.0. The smaller the value, the more transparent the element will be.

IE8 and earlier versions use filter: alpha (opacity= x). The value of x can be from 0 to 100. Lower values make the element more transparent.

Example 2 - Image Transparency - Hover Effect

Move the mouse over the image:

klematisklematis

CSS Styles:

img { opacity:0.4; filter:alpha(opacity=40); /*IE8 and Earlier Versions*/ } img:hover { opacity:1.0; filter:alpha(opacity=100); /*IE8 and Earlier Versions*/ }

The first CSS block is similar to the code in Example 1. In addition, we have added what happens when the user hovers over one of the images. In this case, when the user hovers over the image, we want the image to be clear.

This CSS is:opacity=1.

IE8 and earlier versions use:filter:alpha(opacity=100).

When the mouse pointer moves away from the image, the image will regain its transparency.

Example 3 - Text in a transparent box

This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box.

The source code is as follows:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style>
div.background { width:500px; height:250px; background:url(https://www.example.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 Versions*/ } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; }
</style> </head> <body> <div class="background"> <div class="transbox"> <p>These texts are in a transparent box. These texts are in a transparent box. These texts are in a transparent box. These texts are in a transparent box. These texts are in a transparent box. These texts are in a transparent box. These texts are in a transparent box. These texts are in a transparent box. These texts are in a transparent box. These texts are in a transparent box. These texts are in a transparent box. These texts are in a transparent box. These texts are in a transparent box.</p> </div> </div> </body> </html>

First, we create a div element with a fixed height and width, with a background image and a border. Then we create a smaller div element inside the first div. This div also has a fixed width, a background color, and a border - and it is transparent. Inside the transparent div, we add some text in a p element.

other extensions