【CSS】CSS3ホバーエフェクトHover Effect Ideas

CSS3のホバーエフェクトアイデア

HTML

<article class="grid">
<figure class="effect-lily">
<img src="img/1.jpg" alt="img01">
<figcaption>
<h2>Hey <span>Man</span></h2>
<p>Leyla never play guitar with me.. <br>She's a Headbenger</p>
<a href="http://twitter.com/luizcattani_">View more</a>
</figcaption>
</figure>
</article>  

CSS

/*  Effect lily */
figure.effect-lily img {
width: -webkit-calc(100% + 50%);
width: calc(100% + 50%);
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px, 0, 0);
transform: translate3d(-40, 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 0.35s;
transition: transform: 0.35;
}
figure.effect-lily p {
color: rgba(255,255,255,0.6);
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
transition: opacity 0.2s, transfom 0.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-transfom: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-lily:hover p {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
}
 
Hover Effect Ideas

【CSS】CSS3ホバーエフェクトHover Effect Ideas

  • LATEST
  • RELATED
  • POPULAR