bootstrap-image-hover是一款基于Bootstrap的css3圖片hover效果。這組圖片hover效果共16種特效。同時該特效也支持非Bootstrap版本。

使用方法

在頁面中引入bootstrap相關(guān)文件和FontAwesome字體圖標文件以及effects.min.css文件。

HTML結(jié)構(gòu)

該css3圖片hover效果的每一種效果都有它們自己的HMTL結(jié)構(gòu)，第一種效果的HTML結(jié)構(gòu)如下：

Hover effect 1

Show code

在DEMO示例中，使用鼠標滑過圖片，在hover效果中點擊 show code 鏈接，可以彈出該效果的模態(tài)窗口，可以直接復制后使用該效果。

如果你不需要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 .4s ease-in-out;

transition:all .4s ease-in-out

}

.hovereffect img {

display:block;

position:relative;

-webkit-transition:all .4s linear;

transition:all .4s linear;

}

.hovereffect h2 {

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 .2s ease-in-out;

transition:all .2s ease-in-out;

padding:10px;

}

.hovereffect a.info {

text-decoration:none;

display:inline-block;

text-transform:uppercase;

color:#fff;

border:1px solid #fff;

background-color:transparent;

opacity:0;

filter:alpha(opacity=0);

-webkit-transition:all .2s ease-in-out;

transition:all .2s ease-in-out;

margin:50px 0 0;

padding:7px 14px;

}

.hovereffect a.info:hover {

box-shadow:0 0 5px #fff;

}

.hovereffect:hover img {

-ms-transform:scale(1.2);

-webkit-transform:scale(1.2);

transform:scale(1.2);

}

.hovereffect:hover .overlay {

opacity:1;

filter:alpha(opacity=100);

}

.hovereffect:hover h2,.hovereffect:hover a.info {

opacity:1;

filter:alpha(opacity=100);

-ms-transform:translatey(0);

-webkit-transform:translatey(0);

transform:translatey(0);

}

.hovereffect:hover a.info {

-webkit-transition-delay:.2s;

transition-delay:.2s;

}

總結(jié)

以上是生活随笔為你收集整理的boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。