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

  • 投稿日
  • 更新日
  • 著者 じゃんきー
  • カテゴリー SnowMonkey

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

今回はタイトルの通り、画像ホバーしたときにテキストが浮かび上がる方法を
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などで教えていただければ嬉しいです！

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

じゃんきー

SnowMonkeyBlocks カスタマイズ