纯CSS相册2

这部分的思路可以说全部秉承《a:hover应用精粹》一文，因为事实证明，锚点切换的效果不好（要劳驾用户的尊手多动一下啦，点之后页面会跳动啦，并且不兼容opera）。这部分的效果比较眩目，但难度绝对不会超过“推搡式放大效果”。

它的结构层与《a:hover应用精粹》的后三个示范出奇的相似。CSS也足够强大地表达出我们想要新效果。

<ul id="album">
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
//**************略*********
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
</ul>

用到的图片比较多，但结构我们应该很熟悉。一共32张，其实只是16张，每张重复使用2次（大图与小图）。我们要做的出效果，图片分析4行排列，每行4张，鼠标移到小图上面，对应的大图会在小图左上方出现，并遮住小图。实现思路是，限制UL元素的大小，并且LI元素全部左浮动。大图我们一开始就隐藏起来，当移动到小图上时，我们显示大图，并用绝对定位设置大图的位置，包含块设在A元素上。

ul#album, #album li{
  margin:0;
  padding:0;
  list-style:none;
}
ul#album{/*第1层*/
  width:400px;
  height:300px;
}
#album img {
  border:none;/*默认存在边框，为了精确控制，我们清除它*/
  display:block;/*li img下方多出5px空白bug*/
  width:100px;/*默认平时都以小图形式显示*/
  height:75px;
}
#album li{/*第2层*/
  float:left;/*用于平行排列与换行*/
}
 
#album span {
  display:none;/*平时隐藏大图*/
}
#album a:hover {
  position:relative;
}
#album a:hover span{/*第3层*/
  display:block;
  position:absolute;
  left:-50px;/*左移距离为小图的宽的一半*/
  top:-37px;/*上移距离为小图的高的一半*/
}
#album a:hover span img{
  width:200px;/*我们原图实现太大了，所以也要缩小一下*/
  height:150px;
}

#album span {
    display:none;/*平时隐藏大图*/
  }
  #album a:hover {
    position:relative;
  }
  #album a:hover span{/*第2+999层*/
    display:block;
    position:absolute;
    left:-50px;/*左移距离为小图的宽的一半*/
    top:-37px;/*上移距离为小图的高的一半*/
  }
  #album a:hover span img{
    width:200px;/*我们原图实现太大了，所以也要缩小一下*/
    height:150px;
  }
</style>
<h1>纯CSS相册 by 司徒正美</h1>
<ul id="album">
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
</ul>

但需要的图片太多了，换言之，请求数也很多，这对服务器的压力很大，有没有办法砍掉一些呢？？能！因为我们可以通过hover切换相应图片的大小，就不需要span那一部分了。于是结构层更简单。

<ul id="album">
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
 //****************略************
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
</ul>

ul#album, #album li{
  margin:0;
  padding:0;
  list-style:none;
}
ul#album{/*第1层*/
  width:400px;
  height:300px;
}
#album li{/*第2层*/
  float:left;
  width:100px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/
  height:75px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/
}
#album img{
  border:none;/*默认存在边框，为了精确控制，我们清除它*/
  display:block;/*li img下方多出5px空白bug*/
  width:100px;/*默认平时都以小图形式显示*/
  height:75px;
}
#album a:hover {
  position:relative;/*成为包含块*/
}
 
#album a:hover img{/*只有由hover激活的img才位于第3层*/
  position:absolute;
  left:-50px;/*上移小图的宽的一半*/
  top:-37px;/*上移小图的高的一半*/
  width:200px;
  height:150px;
}

#album a:hover img{/*只有由hover激活的img才位于第3层*/
        position:absolute;
        left:-50px;/*上移小图的宽的一半*/
        top:-37px;/*上移小图的高的一半*/
        width:200px;
        height:150px;
    }
</style>
<h1>纯CSS相册 by 司徒正美</h1>
<ul id="album">
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
    <li>
        <a href="http://www.cnblogs.com/rubylouvre/">
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
        </a>
    </li>
</ul>

这次竟然发现在chrome出现问题，症状是大图总是出现第一幅小图之上，而不是我们鼠标指向那个小图上。留意我们的小图其实位于A元素上，而A元素为大图的包含块。不过A元素好像什么也没有设置，我们给点东西A做延缓A的渲染速度，可能chrome做了过多的内部优化……在样式中添加：

/*[修复chrome绝对定位错乱Bug*/
#album li a{
  display:block;/*让具有盒子模型*/
  width:100px;
  height:75px;
}
/*******完*****]*/

<!doctype html>
<title>纯CSS相册 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯CSS相册 by 司徒正美" />
<meta name="description" content="纯CSS相册 by 司徒正美" />
<style type="text/css">
  ul#album, #album li{
    margin:0;
    padding:0;
    list-style:none;
  }
  ul#album{/*第1层*/
    width:400px;
    height:300px;
  }
  #album li{/*第2层*/
    float:left;
    width:100px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/
    height:75px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/
  }
  #album img{
    border:none;/*默认存在边框，为了精确控制，我们清除它*/
    display:block;/*li img下方多出5px空白bug*/
    width:100px;/*默认平时都以小图形式显示*/
    height:75px;
  }
  #album a:hover {
    position:relative;/*成为包含块*/
  }
  /*[修复chrome绝对定位错乱Bug*/
  #album li a{
    display:block;/*让具有盒子模型*/
    width:100px;
    height:75px;
  }
  /*******完*****]*/
  #album a:hover img{/*只有由hover激活的img才位于第3层*/
    position:absolute;
    left:-50px;/*上移小图的宽的一半*/
    top:-37px;/*上移小图的高的一半*/
    width:200px;
    height:150px;
  }
</style>
<h1>纯CSS相册 by 司徒正美</h1>
<ul id="album">
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
</ul>