blur, transpareny ie ff issue

Ok first of all, this code works in IE. An image in a div is blurry, but on mouseover it focuses and it is also opaque. I want to know if there's an easier way to do this and how to get it to work in FF.


<style type="text/css">
body {
background-color:red;
}
.blur {
background-image: url(image.gif);
height:100px;
width:100px;
filter:progid:DXImageTransform.Microsoft.Blur();
}
.noblur {
background-color:transparent;
border:1px solid black;
height:100px;
width:100px;
}
.opac {
background-image: url(image.gif);
border:1px solid black;
height:100px;
width:100px;
filter:alpha(opacity=80);
opacity:0.8;
}
</style>

<div class="noblur">
<div class="opac">
<div class="blur" onmouseover="this.className='noblur';" onmouseout="this.className='blur';">
</div>
</div>
</div>

Hello GardenGnome2,
I've never messed around with opacity and filter much... not sure how widely supported that code would be.
I have done it using 2 images in a rollover, like this (http://nopeople.com/CSS/CSS_rollover/index.html). Just make the first image blurry and the rolled image focused

I assume you know that 'filter' is an IE only thing and not standard. I've seen articles on how to do a blurring effect for other browsers so you can google for that.

Easiest option would be to do a kind of sprite for the blur and there are options for transparency seen here.

www.mandarindesign.com/opacity.html