Coineyさんの採用ページがかっこよかったので、エフェクトを真似してみた

デモ

電子決済サービスを行っているCoineyさんの採用ページがかっこよかったです。特に社員紹介のところの、マウスホバーエフェクトが目に留まりました。早速参考にして実装することにしました。

水色のメニューが現れる

div{
   display:none;
}

div:hover{
   display:inline;
}

上のようにしたかったのですが、なぜか効かず。結局opacityで透明度を0から1にすることにしました。

水色の透明度は一定にしたかったので、rgbaで色と透明度を設定しました。

background:rgba(128,247,253,0.6);

16進数からRGBに変換する方法がわからなかったので、下記のページを参考にしました。がんばればSCSSで関数を書けたかもしれませんが、めんどくさかったです。

・16進数からRGBに変換する
http://jsdo.it/mattari_panda/25a7

ホバーエフェクト後、アニメーション

img{
    width:$size;
    height:$size;
    @include css3(transform,scale(1.5));
    @include css3(transition,0.2s ease-out);
}

#menu:hover > p{
    opacity:0;
    @include css3(animation,anime 0.3s ease 0.2s);
    @include css3(animation-fill-mode,forwards);/*アニメーション終了時の状態を維持*/
}