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

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

html结构
<div class="grid">
    <figure class="effect-lily">
        <img src="img/1.jpg" alt="img01"/>
        <figcaption>
            <h2>Nice <span>Lily</span></h2>
            <p>Lily likes to play with crayons and pencils</p>
            <a href="#">View more</a>
        </figcaption>            
    </figure>
</div>
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%);

演示地址

赞(0)