CSS
【CSS】CSS3ホバーエフェクトHover Effect Ideas
July 25, 2016

CSS3のホバーエフェクトアイデア
<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>
/* 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; }