html hover图片效果,[CSS3]15个非常酷的图片Hover效果

鼠标悬停图片放大旋转？那个已经是过去式了，看看下面这些非常炫酷的图片悬停效果吧。采用了大量html5和css3元素，配合hover做出的效果。下面取其中一个例子：

html结构

        

Nice Lily

Lily likes to play with crayons and pencils

View more

css

.grid{overflow:hidden;margin:0;padding:3em 0 0 0;width:100%;list-style:none;text-align:center}

.grid figure{position:relative;z-index:1;display:inline-block;overflow:hidden;margin:-0.135em;width:auto;height:400px;background:#3085a3;text-align:center;cursor:pointer}

.grid figure img{position:relative;display:block;min-height:100%;opacity:.8}

.grid figure figcaption{padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}

.grid figure figcaption::before,.grid figure figcaption::after{pointer-events:none}

.grid figure figcaption,.grid figure a{position:absolute;top:0;left:0;width:100%;height:100%}

.grid figure a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}

.grid figure h2{word-spacing:-0.15em;font-weight:300}

.grid figure h2 span{font-weight:800}

.grid figure h2,.grid figure p{margin:0}

.grid figure p{letter-spacing:1px;font-size:68.5%}

figure.effect-lily img{width:-webkit-calc(100%+50px);width:calc(100%+50px);opacity:.7;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}

figure.effect-lily figcaption{top:auto;bottom:0;height:50%;text-align:left}

figure.effect-lily h2,figure.effect-lily p{-webkit-transform:translate3d(0,40px,0);transform:translate3d(0,40px,0)}

figure.effect-lily h2{-webkit-transition:-webkit-transform .35s;transition:transform .35s}

figure.effect-lily p{color:rgba(255,255,255,0.6);opacity:0;-webkit-transition:opacity .2s,-webkit-transform .35s;transition:opacity .2s,transform .35s}

figure.effect-lily:hover img,figure.effect-lily:hover p{opacity:1}

figure.effect-lily:hover img,figure.effect-lily:hover h2,figure.effect-lily:hover p{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

figure.effect-lily:hover p{-webkit-transition-delay:.05s;transition-delay:.05s;-webkit-transition-duration:.35s;transition-duration:.35s}

figure.effect-sadie figcaption::before{position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-linear-gradient(top,rgba(72,76,97,0) 0,rgba(72,76,97,0.8) 75%);