Material Design for Bootstrap3（その7）各種エフェクトの実装

Bootstrapを使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap」。

そのBootstrap3対応バージョン、「Material Design for Bootstrap3（以下、MDB3と表記）」のご紹介7回目です。

今回は各種エフェクトの実装について。

＊Material Design for Bootstrap3
＊Bootstrap Hover Effects – Material Design for Bootstrap

オーバーレイエフェクトの実装

まずはオーバーレイ。

実際の挙動はデモページをご覧ください。

＊MDB3：オーバーレイエフェクトの実装

画像にマウスポインタを載せてもらえば、エフェクトの挙動が分かると思います。

では、実装方法です。
以下がHTMLのコード例になります。

<div class="view overlay hm-blue-strong">
    <img src="images/XXX.jpg" alt="">
    <div class="mask">
        <p>hm-blue-strong</p>
    </div>
</div>

外枠のdivにclass「view」「overlay」を付与します。

さらに使用するエフェクト名をclassで付与します。

エフェクト名は
「hm-(色)-(エフェクトの強さ)」で記述します。
コード例だと「hm-red-strong」です。

「色」は17種類あります。
blue
red
pink
purple
indigo
cyan
teal
green
lime
yellow
orange
brown
grey
bluegrey
black
stylish
white

「エフェクトの強さ」は3種類です。
strong
light
slight

中枠のdivにはclass「mask」を付与し、画像をオーバーレイで覆います。

テキストの記述は任意です。

ちなみに、デモページでは画像の中央にテキストが表示されてます。
これは別途、CSSのflexboxで文字を真ん中に配置しています。

ズームエフェクトの実装

実際の挙動はデモページをご覧ください。

＊MDB3：ズームエフェクトの実装

以下がHTMLのコード例になります。

<div class="view overlay hm-zoom">
    <img src="images/XXX.jpg" alt="">
    <div class="mask">
        <p>Zoom effect</p>
    </div>
</div>

外枠のdivにclass「view」「overlay」「hm-zoom」を付与します。

他はオーバレイと同じです。

シャドウエフェクトの実装

シャドウエフェクトに関しては過去記事でも載せてますが、再掲します。

実際の挙動はデモページをご覧ください。

＊MDB3：シャドウエフェクトの実装

以下がHTMLのコード例になります。

<img src="images/XXX.jpg" class="hoverable" alt="">

こちらはimgタグ自体にclass「hoverable」を付与するだけです。

a要素にエフェクトをかける

エフェクトの応用編です。
divではなく、aタグにエフェクトをかけ、リンクを貼ることも可能です。

実際の挙動はデモページをご覧ください。

＊MDB3：a要素にエフェクトをかける

以下がHTMLのコード例になります。

<a href="#" class="view overlay hm-orange-light hm-zoom a-block">
    <img src="images/XXX.jpg" alt="">
    <div class="mask">
        <p>リンク貼ってます</p>
    </div>
</a>

外枠をaタグにして、class「view」「overlay」と各エフェクトのclassを付与します。

外枠のaタグは「display:block」をかけてブロック要素に変えます。
また、そのままだとマウスポインタの形状がデフォルトのままなので、「cursor:pointer」でリンク時の形に変更します。

以下、CSS例です。

.a-block {
display:block;
cursor:pointer;
}

とうとう7回目まで来ました。たぶん次回で最終回（たぶん）。

関連記事Material Design for Bootstrap3（その8）フォームの実装

2017.05.29

関連記事Material Design for Bootstrap3（その6）スライドショーの実装

2017.05.29

関連記事Material Design for Bootstrap3（その5）パララックスの実装

2017.05.29

関連記事Material Design for Bootstrap3（その4）アニメーションの実装

2017.05.29

関連記事Material Design for Bootstrap3（その3）ボタンの実装

2024.01.03

関連記事Material Design for Bootstrap3（その2）シャドウとホバーエフェクトの実装

2017.05.29

関連記事Material Design for Bootstrap3（その1）導入とカードデザインの実装

2017.05.29

関連記事マテリアルデザインを簡単に実装「Material Design for Bootstrap」

2018.12.11