模糊除了/ span之外的网页

Question

我正在创建一个带有图片的网页，我希望将它们展示得更大，但页面的其余部分会模糊不清。请帮帮我。我只需要CSS效果。感谢。

HTML

<ul class="enlarge">
    <!--We give the list a class so that we can style it seperately from other unordered lists-->
    <!--First Image-->
    <li>
        <img src="../img/modelcast.jpg" width="150px" height="100px" alt="" />
        <!--thumbnail image-->
        <span> <!--span contains the popup image-->
            <img src="../img/modelcast.jpg" alt="" /> <!--popup image-->
            <br />  <!--caption appears under the popup image-->
        </span>
    </li>
</ul>

CSS

/*start enlarge*/
 ul.enlarge {
    list-style-type:none;
    /*remove the bullet point*/
}
ul.enlarge li {
    display:inline-block;
    /*places the images in a line*/
    position: relative;
    /*allows precise positioning of the popup image when used with position:absolute - see support section */
    z-index: 0;
    /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
    margin:10px 40px 0 20px;
    /*space between the images*/
}
ul.enlarge span {
    position:absolute;
    /*see support section for more info on positioning*/
    left: -9999px;
    /*moves the span off the page, effectively hidding it from view*/
    /*add a drop shadow to the frame*/
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .75));
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .75);
    box-shadow: 0 0 20px rgba(0, 0, 0, .75);
}
ul.enlarge li:hover {
    z-index: 50;
    /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/
    cursor:pointer;
    /*changes the cursor to a hand*/
}
/***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/
 ul.enlarge li:hover span {
    /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/
    top: -300px;
    /*the distance from the bottom of the thumbnail to the top of the popup image*/
    left: -20px;
    /*distance from the left of the thumbnail to the left of the popup image*/
    align-content:center;
}
/***To make it look neater we used :nth-child to set a different left distance for each image***/
 ul.enlarge li:hover:nth-child(2) span {
    left: -100px;
}
ul.enlarge li:hover:nth-child(3) span {
    left: -200px;
}
/*end enlarge*/

最后，我可以在悬停时将图像弹出窗口放在页面中间吗？ 感谢。