Opacity for all browsers

This is a simple variable opacity effect (or filter) example using CSS. It should work on all browsers.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<style>

.squarea {

width: 100px;

height: 100px;

background: #F00;

}

.squareb {

width: 100px;

height: 100px;

background: #FF0;

top: -50px;

position: relative;

left: 50px;

opacity: 0.5;

filter: alpha(opacity = 50);

} 

</style>

<div class="squarea"></div>

<div class="squareb"></div>

Newsletter

Sign up for inspiration, news and updates