SS image

Transparent/opaque
Creating transparent images is easy with CSS.

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


More instances



Create transparent image – Hover effect

Create a transparent box with text and a background image

Example 1 – Create a transparent image

The transparency of a property in CSS3 is
opacity.

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

Normal image

The same image with transparency:

Look at the CSS below:

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




Internet Explorer 9, Firefox, Chrome, Opera, and Safari use the transparency property to make images opaque. The value of Opacity property ranges from 0.0 to 1.0. The smaller the value, the more transparent the element.

Internet Explorer 8 and earlier versions use a filter: alpha (opacity= x). The values x can take are from 0 to 100. The lower value makes the element more transparent.

Example 2 – Image transparency – Hover effect

Move the mouse over the image:

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 added what happens when the user hovers over one of the images. In this case, we want the image to be clear when the user hovers over it.

The CSS is:
opacity=1.

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

When the mouse pointer moves away from the image, the image becomes transparent again.

Example 3 – Text in a transparent box

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



Source code is as follows:

<
!
DOCTYPE
html
>
<
html
>
<
head
>
<
meta
charset
=
”
utf-8
”
>
<
style
>


div
.background
{
width:
500
px
;
height:
250
px
;
background:
url
(
klematis
.
jpg
)
repeat
;
border:
2
px
solid
black
;
}
div
.transbox
{
width:
400
px
;
height:
180
px
;
margin:
30
px
50
px
;
background-color:
#ffffff
;
border:
1
px
solid
black
;
opacity:
0.6
;
filter:
alpha
(
opacity
=
60
)
;
/ *
IE8 and earlier
* /
}
div
.transbox
p
{
margin:
30
px
40
px
;
font-weight:
bold
;
color:
# 000000
;
}


</
style
>
</
head
>
<
body
>
<
div
class
=
”
background
”
>
<
div
class
=
”
transbox
”
>
<
p
>
The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is 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 border. Then we create a smaller div element inside the first div. The div also has a fixed width, background color, and border – and it’s transparent. Inside the transparent div, we add some text inside the P element.




From the rookie tutorial

The address www.runoob.com/css/css-ima…