画像にホバーするとテキストが浮かび上がる設定方法【SnowMonkeyBlocksの「バナー」を使用して実装】

こんにちは。
じゃんきーです!

今回はタイトルの通り、画像ホバーしたときにテキストが浮かび上がる方法
SnowMonkeyBlocksの「バナー」ブロックを使用して実装したいと思います。

これはググってみるとWordPressだとプラグインを使用して実装する方法であったり、
コードを編集する方法が多く出てくるのですが
SnowMonkeyBlocksを使用するとそこまで難しい方法は使わずに
実装できたので共有させていただきます!

今回実装するのはこんな感じです↓

それではさっそくやっていきましょう!!!

SnowMonkeyBlocksの「バナー」を選択する

①SnowMonkeyBlocksの「項目」ブロックを選択

②ブロック挿入後に左上のアイコンをクリック

③「バナー」をクリック

「バナー」の編集

①「タイトルを書く」にテキストの入力

②背景マスクの不透明度を「0」に設定

③追加CSSクラスにクラス名を当てる

※今回は「hover-mask」にしてあります。

④画像の挿入

追加CSSでカスタマイズ

①WordPress管理画面から「外観」→「カスタマイズ」へ

②追加CSSに下記コードの入力

.hover-mask .smb-items__banner__body{
 visibility:hidden;
}

.hover-mask:hover .smb-items__banner__body {
visibility:visible;
}

以上です。

まとめ

ケッコー簡単ですよねw

今回はこの方法で実装したのですが
「こんな方法もあるよ」と別の方法を知ってる方がいましたら
ぜひTwitterのDMなどで教えていただければ嬉しいです!

ありがとうございました〜

じゃんきー

この記事を書いた人

じゃんきー

こんにちは!じゃんきーブログを運営しているじゃんきーです。
1987年生まれ。
妻、子ども2人、ねこ1匹と暮らす30代の男。
大学卒業後、作業療法士として病院に10年以上勤務。
家族とのハワイ旅行などより豊かな生活を夢見て、副業に挑戦。
現在WordPressでのWEB制作、ShopifyでのECサイト制作を中心にフリーで活動中。
TwitterのDMなどお気軽にお問い合わせください。