css hover w3c,CSS3 Hover Effects

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

HTML结构

• 
• 
• 
• 
• 
• 

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);

}