CSS3 Hover Effects

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

nike free run 5.0 infrared

如需转载,烦请注明出处:https://www.w3cplus.com/demo/481.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部