Rollover CSS Filter

<head><title>Rollover CSS Filter</title>
</head>
<body>
<!-- source start-->
gray<br>
<a href="#">
<!-- source start-->
<img src="111.jpg" width="500" height="300"
onmouseover="this.style.filter='gray'" onmouseout="this.style.filter=''"></a><br><br>
<!-- source end-->

invert<br>
<a href="#"><img src="111.jpg" width="500" height="300"
onmouseover="this.style.filter='invert'" onmouseout="this.style.filter=''"></a><br><br>

X-ray<br>
<a href="#"><img src="111.jpg" width="500" height="300"
onmouseover="this.style.filter='xray'" onmouseout="this.style.filter=''"></a><br><br>

fliph<br>
<a href="#"><img src="111.jpg" width="500" height="300"
onmouseover="this.style.filter='fliph'" onmouseout="this.style.filter=''"></a><br><br>

flipv<br>
<a href="#"><img src="111.jpg" width="500" height="300"
onmouseover="this.style.filter='flipv'" onmouseout="this.style.filter=''"></a><br><br>

wave<br>
<a href="#"><img src="111.jpg" width="500" height="300"
onmouseover="this.style.filter='wave'" onmouseout="this.style.filter=''"></a><br><br>

blur<br>
<a href="#"><img src="111.jpg" width="500" height="300"
onmouseover="this.style.filter='blur'" onmouseout="this.style.filter=''"></a><br><br>
<!-- source end -->

1.gray 2.invert 3. xray  4.fliph 5. flipv 
6.wave 7. blur
</body>

Share

%d bloggers like this: