放大和模糊CSS中的图像具有对所有浏览器的响应

Question

While clicking an image, the image should zoom in and set as background for the page with blurred property.

I tried with the following code,..

<style type="text/css">
body{
position: absolute;
margin-left: 100px;
right: 0;
 z-index: 99999;
  display: block;
  background: url(music_album_img/images8.jpg);
  width: 100%;
  height: 100%;  
  -webkit-filter: blur(75px);
  -moz-filter: blur(50px);
  -o-filter: blur(75px);
  -ms-filter: blur(75px);
  filter: blur(75px);
}

Here i set the image with 100% of Width and Height.

 .mi {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}
#background-image, #background-image span { 
    background: #fff url(http://css-plus.com/examples/2012/03/gaussian-blur/i/fence-sprite.png) no-repeat left top; 
    height: 220px; 
    width: 320px; 
    position: relative;
}
#background-image span { 
    background-position: 0 -220px; 
    opacity: 0;
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1;
  -webkit-transition: opacity 0.3s ease-out; 
     -moz-transition: opacity 0.3s ease-out; 
      -ms-transition: opacity 0.3s ease-out; 
       -o-transition: opacity 0.3s ease-out; 
          transition: opacity 0.3s ease-out;
           opacity: 1;

}
#background-image:hover span { opacity: 1; }

The selected image haven't set as background and no property have set on Blurring.

I have used this link . It only works on Chrome and Opera, not for other common browsers...

Give some suggestions on it

Answer 1

i'm very happy to share this solution with you all..

I tried the following code for filter option in firefox to get the solution

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'effect-blur-1\'><feGaussianBlur stdDeviation=\'15\' /></filter></svg>#effect-blur-1");

You can find the solution here.

But still searching for the solution in IE, and for Safari blur option will work on Safari6.0 or Later. But Unfortunately Safari for Windows has been discontinued. The most recent Safari version you can get is 5.1.7.