Css image opacity

Hi friends in this post I am sharing about css image opacity.Css image opacity is used to make images transparent.

 

 

 

css-image-opacity

 

 

 

Copy and paste the below code in notepad and save in”.html” format(be sure you have added an image from your pc and replace path in yellow highlighted color) and open with browser.For internet explorer , we are using filter: alpha(opacity=40); .If filter: alpha(opacity=0); the image will be more transparent.

If filter: alpha(opacity=100); the image will not have a transparent effect.Like the same for “opacity:0.4;” the image transparent will be more when it is “opacity:0.1;” .And the image will not have transparent effect when it is “opacity:1.0;” .

 

 

<style>

img{
opacity: 0.4;
    filter: alpha(opacity=40);
}
img:hover{

opacity: 1.0;
    filter: alpha(opacity=100);
}
</style>
<body>

<div>
<img src="D:/desk/pencil-icon.png" width="auto" height="auto">
   

</div>
</body>

Image with transparent effect (when opacity is 0.4):

 

 transparent-image

Image with no transparent effect (when opacity is 1.0):

 

image-with-no-transparent-effect

Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment