Use CSS and javascript to change opacity and transparency of a picture or div block
Running ...

Changing Opacity of Picture


Using filter:alpha(opacity) for IE and -moz-opacity for FireFox.

Test placing the cursor over the picture !



Html Code


  • The code :

<div style="text-align: center;">
<img src="URL of gif" alt="Test"
title="Test"
style="border-width: 0;
opacity: 0.2; filter:alpha(opacity=20)" onmouseover="changevisibility(this,0);" onmouseout="changevisibility(this,1);"
height="74" width="200">
</div>


 


 

Javascript Code


  • changevisibility function :

function changevisibility(lowvis,highvis)
{
force=(highvis==0)? 1 : 0.2
if (lowvis.style.MozOpacity)
lowvis.style.MozOpacity=force
else if (lowvis.filters)
lowvis.filters.alpha.opacity=force*100
}

 

 

Creating a filter for black and white picture


  • We use the original picture as a background image of a div block :
     

<div
style="width:240px;
height: 207px;
background-image: url(URL of black and white picture)">
</div>

 

  • The original picture within a div block :

 

  • We now define the opacity of the picture, using this inline style :

filter:alpha(opacity=80);
opacity: .80;

 

  • The HTML : 

<div style="width:240px; height: 207px;
filter:alpha(opacity=80);opacity:.80;
background-image: url(URL of black and white picture)">
</div>

 

  • We now encapsulate this div block, within a container, which use orangered (#ff4500) as background-color :

 

<div
style="width: 240px; 
background-color: #ff4500;
margin: auto;">
<div style="width:240px; height: 207px;
filter:alpha(opacity=80);opacity:.80;
background-image: url(URL of black and white picture)">
</div>
</div>

 

  • And the result :



Fade Effects between Pictures



  • Click on the thumbnail to display the picture
  • Using setTimeout it's possible to change the opacity by increment
  • Display the original page, fading-pictures.htm


Gif Picture with Transparency


  • Using a gif picture where white (#FFFFFF) is the transparent color.


Search with Google Switzerland, in french


jpg version of this picture, white background


Search with Google Switzerland, in french


More Informations




One Day - One Label - One Wine





Google - Philippe Chappuis Twitter - Prac53 Facebook - Chappuis YouTube - Chappuis Linkedin - Prac53 Flickr - Prac53 Technorati - Prac53 Xing - Philippe Chappuis Delicious - Prac53 StumbleUpon - Prac53 Wikio - Prac53 Slideshare - Prac53 Flux RSS - Blog de Prac