HTML

html content help to improve the coding

Wednesday, 29 October 2014

Image Transparancy

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:
klematis The same image with transparency:
klematis Look at the following CSS:

Example

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

Try it yourself »
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.

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); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

Try it yourself »
The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a 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:

Example

<html>
<head>
<style>
div.background {
    width: 500px;
    height: 250px;
    background: url(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); /* For IE8 and earlier */
}

div.transbox p {
    margin: 30px 40px;
    font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>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.</p>
  </div>
</div>

</body>
</html>

Try it yourself »
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)