How to Make Transparent Effect On Image Blog (CSS Image Opacity)

Transparent effect on the image (image transparency / opacity) is often used in the blog / website as the effect hover (mouse over) the appearance of transparency of images (or vice versa) when the mouse is directed over the image. Transparency is one of image effects that can be created with CSS and modified in such a way, as well as other effects, such as a picture shadow effect (CSS Shadow Box 3).
Basic CSS Transparency Images (CSS Image Transparency / Opacity)CSS properties are used as command image transparency effect is opacity: x. This property is used by Mozilla Firefox and some other browsers. 're On IE (Internet Explorer) used the property filter: alpha (opacity = x). X is the value of transparency, on Mozilla Firefox and some other browsers, the default value is 1.0, while the IE is 100. To provide transparent scale effect, reduce the value of x it. Reduction with the same value among other browsers with IE is 1 / 10, so subtract 0.1 on opacity and less than 10 on the filter to get transparency effects are the same. The smaller the value of x greater transparency.Example:

    img {opacity: 0.5; filter: alpha (opacity = 50;}



Use of Transparency Images as Hover Effect (Mouse Over)As mentioned above, this effect is often used and combined as a hover effect. So, this post will focus on the use of transparent images as hover effects.As on the link (a) and hover link (a: hover), we can apply it to image.

    img {opacity: 1.0; filter: alpha (opacity = 100;}
    img: hover {opacity: 0.5; filter: alpha (opacity = 50;}
Example (point your mouse over the image):
Or conversely, if you want a picture turned into a light (not transparent) when the mouse is directed above, the exchange value of transparency:

    img {opacity: 0.5; filter: alpha (opacity = 50;}
    img: hover {opacity: 1.0; filter: alpha (opacity = 100;}
Example (point your mouse over the image):

 Creating a Hover Effect On Image By Individual Transparent (no link)If you want to make images transparent effect to be given effect without containing the link (flanked <a> tag and </ a>):1. Insert the following script above ]]></ b: skin>

    . Brl-transparent {opacity: 1.0; filter: alpha (opacity = 100);}
    . Brl-transparent: hover {opacity: 0.5; filter: alpha (opacity = 50);}

 or conversely,

    . Brl-transparent {opacity: 0.5; filter: alpha (opacity = 50);}
    . Brl-transparent: hover {opacity: 1.0; filter: alpha (opacity = 100);}
2. Save the template.3. In the tag image, either in the edit post HTML editor or edit HTML templates, add class = "brl-transparent"Example:

    <img class="brl-transparan" src="http://urlgambar.com/image.jpg" border="0" />

 Creating a Hover Effect In Images Containing Transparent LinkIf you want to be transparent hover effect is an image that contains a link, it takes deklarator link (a) and image (img) on ​​CSSnya:1. Insert the following script above ]]></ b: skin>

    a.brl-transparent img {opacity: 1.0; filter: alpha (opacity = 100);}
    a.brl-transparent: hover img {opacity: 0.5; filter: alpha (opacity = 50);}

 or conversely,

    a.brl-transparent img {opacity: 0.5; filter: alpha (opacity = 50);}
    a.brl-transparent: hover img {opacity: 1.0; filter: alpha (opacity = 100);}
2. Save the template.3. In the tag image links, either in the edit post HTML editor or edit HTML templates, add class = "brl-transparent"Example:.

    <a class="brl-transparan" href="http://buka-rahasia.blogspot.com"> src="http://urlgambar.com/image.jpg" <img border="0" /> < / a>

 Here's an example image that contains a link with its transparency effects image:Click to Enlarge ImageGood Luck and Enjoy!