【ちょっとした工夫でクールなイメージに】CSS3で作るホバーエフェクト３選！

現代のWebテクノロジーでは、数えきれないほどのギミックが存在しますが、それらを実装するのには最もシンプルで使いやすいCSS３がお勧めです。一昔前は、動的効果はJavaScriptなどに頼らなければいけませんでしたが、CSS3ではいずれ劣らぬクールなエフェクトを簡単に作ることが出来るからです。今回は、そんなCSS3で作るホバーエフェクトを３つ紹介します。

DEMO１

今回の中では最も簡単に実装できます。イメージにマウスオーバーすると、上のレイヤーを構成する画像が枠外に飛んでいき、キャプションが現れます。

画像は元記事を参照

・html

ulタグを使い、キャプションとイメージを包みます。ulタグのなかにdemo-1とeffectのクラスを加えるという点に注意しましょう。次のようになるはずです。

<ul class="demo-1 effect">
    <li>
            <h2>This is a cool title!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

・CSS
Relative positionを設定し高さと幅を調整し、overflowをhiddenに設定します。effect classはボタンに対して-15pxのマージンを設けます。CSS3のトランスアクションを設定すれば下のようにスムーズに動作します。

.demo-1 {
    position:relative;
    width:300px; 
   height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-1 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-1 h2 {
    font-family:'Lato';
    font-size:20px;
    line-height:24px;
    margin:0;
}
.effect img {
    position:absolute;
    margin:-15px 0;
    right:0;
    top:0;
    cursor:pointer;
    -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
    -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
    -o-transition:top .4s ease-in-out,right .4s ease-in-out;
    transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
    top:-230px;
    right:-330px;
    padding-bottom:200px;
    padding-left:300px
}

DEMO2

マウスオーバーすると画像がスライドダウンして、その空いたスペースにキャプションが現れます。

画像は元記事を参照

・html

DEMO1のものと似るのですが、クラスとしてdemo-2を使い、さらに以下のようにzeroのクラスを加えます。

<ul class="demo-2 effect">
    <li>
       <h2 class="zero">This is a cool title!</h2>
       <p class="zero">Lorem ipsum dolor sit amet.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

・CSS
CSSの設定は最初のDEMO１とさほど変わりませんが、今回はイメージを下にスライドさせなければいけません。位置を下へ96px調整すればこのようなギミックが出来上がります。これにもCSS3のトランスアクションを設定しています。

.demo-2 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-2 h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'
}
.effect img {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
.effect img.top:hover {
    bottom:-96px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

DEMO3

今回紹介する最後のデザインはマウスオーバーすると画像がスピンし、ひっくり返ってキャプションが見えるという仕組みです。

画像は元記事を参照

・html

これまでとは違った構造を用いることになります。HTML5のfigure要素を、そのなかにfigureキャプションを入れて使います。ulタグに使用するのはdemo-3のクラスです。

<ul class="demo-3">
    <li>
        <figure>
            <img src="images/image1.jpg" alt=""/>
            <figcaption>
                <h2>This is a cool title!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </figcaption>
        </figure>
    </li>
</ul>

・CSS
イメージのポジションをrelative positionに設定して、backface-visivilityをhiddenに設定します。そしてfigcaptionをrotateYtransform:-180に設定して、イメージとキャプションが反転するように180と入力します。

いかがでしたか？CSS3で簡単にこれだけ見た目のいい動的効果が実装できることにびっくりされた方もいるのではないでしょうか。ちょっとした動的効果を加えて変化をつけたいときには、CSS3で上述のようなホバーを実装してみることなどお勧めします。

（※本記事は、3 cool CSS3 image hover effectsを翻訳・再編集したものです。）