訴求力抜群なCSS3 イメージエフェクトボタン 3タイプ!

3つのクールなCSS3 イメージ・ホバー・エフェクト

最近のウェブサイトでは楽しいリアクションを表現するためにあらゆるアイデアが使われていますが、最もシンプルでエレガントな方法はCSSを使うことで、とりわけCSS3ではユニークな手法が取り入れられています。

以前はこうしたエフェクトを表現するためにJavaScriptが用いられていましたが、あらゆるブラウザーがCSS3をサポートし始めたおかげで、まったくスクリプトを記述せずにこうした効果を表現することができるようになりました。IE9及びそれ以前のバージョンのように、残念ながら未だCSS3をサポートしていないブラウザーもありますので、こうしたレガシー・ブラウザーのためにスクリプトを記述するか、あるいはこれらのエフェクトをプログレッシブ・エンハンスメントとして扱うかいずれかの方法を選択することができます。

では、イメージやキャプションを見せたり隠したりするために、こうしたクールでシンプルなホバー・エフェクトをどのように適用できるか見ていきましょう。

コードを見たい場合には、こちらからファイルをダウンロードすることができます。

 

CSS3 イメージエフェクトボタン その1

最初のデモは最もシンプルです。キャプションを表示するために、イメージが右に飛んで行きます。

 マークアップの記述

この最初のデモではアンオーダード・リスト・タグで、イメージとキャプションをラップします。タグの中に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

CSSではdemo-1クラスにrelativeポジションを記述し、幅と高さを設定します。また、オーバーフロー要素をhiddenにしておきます。h2とpタグにイメージタグ同様の基本的なスタイルを設定しておきました。エフェクトについてはポジションをabsoluteとして15pxのマージンをtopとbottomに設定しました。
CSS3のtransitionを使うことでエフェクトをスムーズに動作させることができます。CSSは以下のようになります。

.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
}

 

 

CSS3 イメージエフェクトボタン その2

2つ目のデモではイメージが下にスライドしていきます。
マウスをホバーさせると、キャプションが上から表示される訳です。

マークアップの記述

2つめのデモのhtmlでは、最初のものと非常によく似た記述方法を用います。
ただ、今回は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は最初のものとほとんど同じですが、落ちていくように見せるためにbottomプロパティを96pxにします。やはり、CSS3のtransitionを使ってスムーズなエフェクトを実現しています。

.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
}

CSS3 イメージエフェクトボタン その3

最後のデモではフリッピング・カード・エフェクトを作ります。
マウスをホバーさせると、カードのようにくるりとひっくり返って説明文が表示されるエフェクトです。

マークアップの記述

最後のデモでは、少し異なる構造のマークアップになっています。
まず、HTML5のfigureエレメントをfigure captionタグとともに用いています。また、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

CSSでは、figureイメージのポジションをrelativeにしてbackface-visibilityを隠しておきます。そして、figcaptionに-180の値を与え、マウスをホバーさせたときにY軸上で180度回転してイメージとキャプションを交換するように設定しています。

.demo-3 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}
.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    font-family:\'Lato\';
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-family:\'Lato\';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

3つのクールなCSS3 イメージ・ホバー・エフェクト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

GeoDesign

ホームページは、情報収集が得意なメディアです。 集めたデータを活用することで、ホームページの改善だけではなく、リアルマーケティングや、新商品開発に発展するまでにできるのです。
  • 成果の見えるホームページを運用したい。
  • デジタルマーケッターになれる広報担当者を育成したい。
  • 自社メディアでブランド力の強化と、顧客創造を図りたい。
こんな欲求をかかえるあなた。
  • どうしたらウェブサイトから成果が上がるのかわからない
  • 簡単に運用できるシステム、時間ロス・コストロスを減らしたい
こんな悩みをかかえるあなた。 私達にその欲求や悩みを改善するお手伝いを任せてみませんか?