CSS3 Hover Effects

这个案例效果很像lightbox的效果，鼠标悬浮在图片上时，会将图片放大，并且移至页面中心位置。这个效果的实现并没有使用太多的技术，最关键的就是使用了CSS3 transform中的scale和translate，其中使用scale()来放大图片，而translate()用来改变其位置，另外使用了CSS3选择器的:nth-type-of()分别对六张图片进行放大和定位。同时使用了transition属性，让整个图片放大效果看起来更圆润，详细的效果看代码吧，更有说服力。

demodownload

HTML结构

<div class="thumb-wrap">
  <ul class="thumb">
   <li><img src="1.jpg" alt="beautiful-thumbnail-hover-effect-01"></li>
   <li><img src="2.jpg" alt="beautiful-thumbnail-hover-effect-02"></li>    
   <li><img src="3.jpg" alt="beautiful-thumbnail-hover-effect-03"></li>
   <li><img src="4.jpg" alt="beautiful-thumbnail-hover-effect-04"></li>
   <li><img src="5.jpg" alt="beautiful-thumbnail-hover-effect-05"></li>
   <li><img src="6.jpg" alt="beautiful-thumbnail-hover-effect-06"></li>
  </ul>
</div>

CSS代码

body { 
  background:url(black-bg.png) repeat 0 0;
} 
.thumb-wrap {
  width:60%;
  min-width:300px;
  margin:0 auto;
  font-size:100%;
  text-align: center;
}

.thumb-wrap:after {
  content:"";
  display:block;
  clear:both;
  height:50px;
}  
.thumb {
  width:100%;
  list-style:none;
  float:left;
  padding:0 0 2.5% 0;
  margin-top:5px;
}

.thumb li {
  width:30%;
  float:left;
  margin:2.5% 0 0 2.5%;
  position:relative;
}

.thumb li img {
  max-width:100%;
  float:left;
  border:8px solid #fff;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
}

.thumb li {
  -moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  -o-transition:all 1s ease;
  -ms-transition:all 1s ease;
  transition:all 1s ease;
}

.thumb li:hover {
  -moz-transform:scale(2.6) translate(100px, 38px);
  -webkit-transform:scale(2.6) translate(100px, 38px);
  -o-transform:scale(2.6) translate(100px, 38px);
  -ms-transform:scale(2.6) translate(100px, 38px);
  transform:scale(2.6) translate(100px, 38px);
  z-index:2;
}

.thumb li:nth-of-type(2):hover {
  -moz-transform:scale(2.6) translate(0, 38px);
  -webkit-transform:scale(2.6) translate(0, 38px);
  -o-transform:scale(2.6) translate(0, 38px);
  -ms-transform:scale(2.6) translate(0, 38px);
  transform:scale(2.6) translate(0, 38px);
}

.thumb li:nth-of-type(3):hover {
  -moz-transform:scale(2.6) translate(-100px, 38px);
  -webkit-transform:scale(2.6) translate(-100px, 38px);
  -o-transform:scale(2.6) translate(-100px, 38px);
  -ms-transform:scale(2.6) translate(-100px, 38px);
  transform:scale(2.6) translate(-100px, 38px);
}

.thumb li:nth-of-type(4):hover {
  -moz-transform:scale(2.6) translate(100px, -38px);
  -webkit-transform:scale(2.6) translate(100px, -38px);
  -o-transform:scale(2.6) translate(100px, -38px);
  -ms-transform:scale(2.6) translate(100px, -38px);
  transform:scale(2.6) translate(100px, -38px);
}

.thumb li:nth-of-type(5):hover {
  -moz-transform:scale(2.6) translate(0, -38px);
  -webkit-transform:scale(2.6) translate(0, -38px);
  -o-transform:scale(2.6) translate(0, -22px);
  -ms-transform:scale(2.6) translate(0, -38px);
  transform:scale(2.6) translate(0, -38px);
}

.thumb li:nth-of-type(6):hover {
  -moz-transform:scale(2.6) translate(-100px, -38px);
  -webkit-transform:scale(2.6) translate(-100px, -38px);
  -o-transform:scale(2.6) translate(-100px, -38px);
  -ms-transform:scale(2.6) translate(-100px, -38px);
  transform:scale(2.6) translate(-100px, -38px);
} 

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/beautiful-thumbnail-hover-effects-using-css3.html