bootstrapimagehover是一款基于Bootstrap的css3图片hover效果。这组图片hover效果共16种特效。同时该特效也支持非Bootstrap版本。
使用方法
在页面中引入bootstrap相关文件和FontAwesome字体图标文件以及effects.min.css文件。
<linkhref="css/bootstrap.min.css"rel="stylesheet"><linkhref="css/font-awesome.min.css"rel="stylesheet"><linkhref="css/effects.min.css"rel="stylesheet">
HTML结构
该css3图片hover效果的每一种效果都有它们自己的HMTL结构，第一种效果的HTML结构如下：
<divclass="col-lg-3col-md-4col-sm-6col-xs-12"><divclass="hoverehover1"><imgclass="img-responsive"src="images/girl.jpg"alt=""><divclass="overlay"><h2>Hovereffect1</h2><buttonclass="info"data-toggle="modal"data-target="#modal1">Showcode</button></div></div></div>
在DEMO示例中，使用鼠标滑过图片，在hover效果中点击 show code 链接，可以弹出该效果的模态窗口，可以直接复制后使用该效果。
如果你不需要Bootstrap的支持，只需要将顶级div中的col-* class类去掉即可。
CSS样式
第一种效果的CSS样式如下：
.hovereffect{width:100%;height:100%;float:left;overflow:hidden;position:relative;text-align:center;cursor:default;}.hovereffect.overlay{width:100%;height:100%;position:absolute;overflow:hidden;top:0;left:0;opacity:0;background-color:rgba(0,0,0,0.5);-webkit-transition:all.4sease-in-out;transition:all.4sease-in-out}.hovereffectimg{display:block;position:relative;-webkit-transition:all.4slinear;transition:all.4slinear;}.hovereffecth2{text-transform:uppercase;color:#fff;text-align:center;position:relative;font-size:17px;background:rgba(0,0,0,0.6);-webkit-transform:translatey(-100px);-ms-transform:translatey(-100px);transform:translatey(-100px);-webkit-transition:all.2sease-in-out;transition:all.2sease-in-out;padding:10px;}.hovereffecta.info{text-decoration:none;display:inline-block;text-transform:uppercase;color:#fff;border:1pxsolid#fff;background-color:transparent;opacity:0;filter:alpha(opacity=0);-webkit-transition:all.2sease-in-out;transition:all.2sease-in-out;margin:50px00;padding:7px14px;}.hovereffecta.info:hover{box-shadow:005px#fff;}.hovereffect:hoverimg{-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2);}.hovereffect:hover.overlay{opacity:1;filter:alpha(opacity=100);}.hovereffect:hoverh2,.hovereffect:hovera.info{opacity:1;filter:alpha(opacity=100);-ms-transform:translatey(0);-webkit-transform:translatey(0);transform:translatey(0);}.hovereffect:hovera.info{-webkit-transition-delay:.2s;transition-delay:.2s;}
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/34379.html；
