こんにちは。
じゃんきーです!
今回はタイトルの通り、画像ホバーしたときにテキストが浮かび上がる方法を
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などで教えていただければ嬉しいです!
ありがとうございました〜
じゃんきー