画像にホバーするとテキストが浮かび上がる設定方法【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などで教えていただければ嬉しいです!

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

じゃんきー

この記事を書いた人

じゃんきー

病院で10年以上医療職として勤務する傍ら、副業に取り組む。
副業で5〜10万を得られることで生活やメンタルが豊かになることを実感。
同じように感じてもらえる仲間を増やすため、副業お助けブログを運営。
夢は副業で得た収入で家族とのハワイ旅行。
自分の強みや目標、やりたいことを一緒に見つけませんか?