CSS Opacity Transparency Properties

Html copy reset ☀ Lights Netbax Online Editor Try it Yourself Run

img {
  opacity: 0.5;
}

example: 2

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

example: 3

img:hover {
  opacity: 0.5;
}
.imgopac2 { 
  opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
cursor:pointer;
}

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

.imgopac { 
      opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
cursor:pointer;
}

.imgopac:hover {
  opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>

<p id="x2">example: 1 'Transparent Image'</p>

<div class="x-row-padding" style="margin:0 0px">
<div class="x-third x-center">
<img src="../../../../netbax_files/test3.jpeg" alt="test3" title="test3" style="width:200px; height:130px; opacity:0.2;">
<p>opacity 0.2</p>
</div>
<div class="x-third x-center">
<img src="../../../../netbax_files/test3.jpeg" alt="test3" title="test3" style="width:200px; height:130px;opacity:0.5">
<p>opacity 0.5</p>
</div>

<div class="x-third x-center">
<img src="../../../../netbax_files/test3.jpeg" alt="test3" title="test3" style="width:200px; height:130px;">
<p>opacity 1<br>(default)</p>
</div>
</div>

<p id="x2">example: 2 'Transparent Hover Effect' - Mouse Over Me</p>

<p id="x2">example: 3 An example of reversed hover effect - Mouse Over Me</p>
<div class="x-row-padding" style="margin:0 -16px">
<div class="x-third x-center">
<img src="../../../../netbax_files/test1.jpeg" alt="test1" title="test1" style="width:200px; height:130px;" class="imgopac">
</div>