原文来自：Create Resizing Thumbnails Using Overflow Property
翻译整理：西米CC
本教程是学习如何利用CSS来实现鼠标经过网页中图片时的缩略放大效果，因为有时候我们的网页布局中没有足够大的空间来放置原始尺寸的图片，并且也不想把尺寸调小的图片光秃秃的摆放在那里。本文讲述的CSS技巧可以让我们在网页中预先放置尺寸较小的缩略图，而当鼠标上移时，图片能显示其全貌。
效果演示：纯CSS实现图片缩略与延展
概述【Overview】
注意，我们这里所将的并不是图片尺寸的放大或缩小，例子中所谓的缩略图实际上是图片中的一块区域，当鼠标经过时显示完整图片，其实是一种“区域延展”而非“尺寸缩放”！
CSS中的overflow属性定义了容器范围之外内容的显示方式，也就是说当容器区域不足以容纳下它里面的内容时，超出部分的内容应该如何处理。Overflow属性的取值包括visible, hidden, scroll和 auto，在本例中我们将综合利用这些属性值。基本的思路是，默认时图片的某些区域是隐藏的，而当鼠标经过时，它又会取消隐藏完整的显示出来。
原理【The Concept】
本实例的基本理念是：把一张图片放置在一个容器中，因为要响应鼠标经过的动作，所以这个容器我们采用a标签；我们把容器的尺寸设置为我们需要的缩略大小，并将其定位方式设置为相对定位，而其中的图片采用绝对定位方式，设置一定量的负值top和left；容器的overflow属性预设为hidden，如此就能实现图片的局部显示； 最后当鼠标经过动作触发容器a的a:hover状态时，将其overflow属性重置为 visible，实现最终的全图显示效果。
代码【The Code】
这个技巧可以应用于单图或多图，首先来看一下HTML代码：
- <ul id="thumbs">
- <li><a href="http://ximicc.com/"><img src="002.jpg" /></a></li>
- <li><a href="http://ximicc.com/"><img src="001.jpg" /></a></li>
- <li><a href="http://ximicc.com/"><img src="004.jpg" /></a></li>
- </ul>
CSS中我们首先对容器样式进行定义：
- ul#thumbs, ul#thumbs li{
- margin:0;
- padding:0;
- list-style:none;
- }
- ul#thumbs li{
- float:left;
- margin-right:5px;
- border:1px solid #999;
- padding:2px;
- }
- ul#thumbs a{
- display:block;
- float:left;
- width:100px;
- height:100px;
- line-height:100px;
- overflow:hidden;
- position:relative;
- z-index:1;
- }
接着是对图片的CSS样式设定：
- ul#thumbs a img{
- float:left;
- position:absolute;
- top:-10px;
- left:-20px;
- }
a标签定义了宽和高，所以它里面不管放置的是什么，都只能出现在预设的区域之内。然后我们通过负值定位灵活的裁切缩略图区域，如果你不嫌麻烦，可以为每张图片定义不同的缩略范围：
- ul#thumbs a img{
- float:left;
- position:absolute;
- top:-10px;
- left:-20px;
- }
- ul#thumbs li#image1 a img{
- top:-40px;
- left:-120px;
- }
- ul#thumbs li#image2 a img{
- top:-10px;
- left:-120px;
- }
接着定义鼠标经过时应用在图片上的CSS样式：
- ul#thumbs a:hover{
- overflow:visible;
- z-index:1000;
- border:none;
- }
注意其中容器和图片CSS上均有的z-index取值，因为它决定了图片与其邻近元素的覆盖关系，一般情况下我们都希望完整的图片能遮盖住旁边的文字等元素，所以其z-index取值要足够大。
喜欢的就爱屋及乌 被雷了就诛连九族
欢迎您访问西米CC博客，本文被浏览了170次。若需要转载西米CC的原创文章，请接受如下的小小要求，所转载日志文章开端或者末尾做如下标识：
本文转载自：西米CC - http://ximicc.com
