画像の角から、マウスホバーでレイヤーが全体にスライドするようなエフェクトを作りたかった。
で、参考にしたのはこちら。
http://codepen.io/davidleininger/details/FuitG
SASSで書かれていたのでCSSに書き直したり、三角の位置変えてみたり。
あとリンクにしたかったのでa要素に変えてみたり。
IE10だとa要素を調整しないともれなく説明文が消える。
IE9以下はtransition未対応なのでホバー時に一瞬でエフェクトが表示される。
つまりIEなぞ知るか。
Firefoxだと角の見出しがホバー時にぶれる。これ原因特定してない。
あとSEO対策とかブロックレベル要素とかインライン要素とか考慮してない。すまない。
HTML側
とりあえず枠を作る。構成は以下の通り。
・box
全体の外枠。
・overlay
角の部分。ホバーで対角線上に向かって広がっていく。
・corner-overlay-content
角の上に表示するテキスト。見出しとか。ホバー時には消える。
・overlay-content
ホバーで表示されるコンテンツを入れるための枠。
・description
ホバーで表示される説明テキスト。今回はリンクにしたかったのでa要素に。
<div class="box"> <div class="overlay"></div> <div class="corner-overlay-content">NEW</div> <div class="overlay-content"> <a class="description" href="#">ここに画像の説明とか入れたらいいんじゃないかな!!</a> </div> </div>
CSS側
構成した各要素にぺしぺしスタイルを指定する。
コメントでちょっとだけ解説。
コーナーの位置についてはrightにしているpositionをleftにしたりtopをbottomに変えたりすればよい。
/* 外枠部分 */ .box { position: relative; overflow: hidden; /* 大きさや背景は適宜変更する */ width: 300px; height: 300px; } /* コーナー部分 */ .box .overlay { border-top: 46px solid #E60012; border-right: 46px solid transparent; position: absolute; top: 0; left: 0; height: 0; width: 0; opacity: 1; -moz-transition: 0.5s ease-out; -webkit-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; -ms-transition: 0.5s ease-out; } /* コーナー部分(ホバーでスライド) */ .box:hover .overlay { /* 大きさを外枠の2倍にする */ border-top: 600px solid #E60012; border-right: 600px solid transparent; opacity: 0.7; -moz-transition: 0.5s ease-out; -webkit-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; -ms-transition: 0.5s ease-out; } /* コーナーに表示する文字 */ .box .corner-overlay-content { position: absolute; top: 7px; left: 2px; font-size: 12px; color: #FFFFFF; /* 角に合わせて斜めにする */ -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transition: 0.5s ease-out; -webkit-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; -ms-transition: 0.5s ease-out; } /* コーナーに表示する文字(ホバーで非表示に) */ .box:hover .corner-overlay-content { opacity: 0; -moz-transition: 0.5s ease-out; -webkit-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; -ms-transition: 0.5s ease-out; } /* ホバー時に表示するコンテンツ */ .box .overlay-content { bottom: 0; left: 0; right: 0; top: 0; opacity: 0; /* 初期状態は非表示 */ position: absolute; -moz-transition: 0.3s ease-out; -webkit-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; } /* ホバー時に表示するコンテンツ(ホバーで表示する) */ .box:hover .overlay-content { opacity: 1; -moz-transition: 0.3s ease-out; -webkit-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; } /* 説明テキスト(初期状態は非表示) */ .overlay-content a { text-decoration: none; opacity: 0; padding: 30px; /* サイズを外枠に合わせる */ position: absolute; bottom: 0; top: 0; left: 0; right: 0; } /* 説明テキスト(ホバーで表示) */ .overlay-content a:hover { text-decoration: none; color: #FFFFFF; font-weight: bold; font-size: 12px; outline: 0 none; opacity: 1; }
こうなる
できあがったものがこちら。
↓
↓
・・・なんかあれだ。色の選択間違えたね。かまいたちの夜とかペルソナQの第3層を連想させるねこれ。
背景を画像にしたり、コーナーの位置変えたり、結構アレンジできるのでサムネにも使えるやも。