【SWELL】マウスホバーを画像とキャプション同時にさせる方法

当ページのリンクには広告が含まれています。
初心者ブロガー

キャプションにカーソルを乗せても画像がホバーしません。キャプションにカーソルを乗せても画像がホバーする方法があれば教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • SWELLブロックのリッチカラムに実装する方法
  • リッチカラムのカラム項目に実装する方法
  • メディアの画像に実装する方法

是非、最後まで読んでみて下さい。

本記事の内容

【SWELL】マウスホバーを画像とキャプション同時にさせる方法

カーソルを「キャプション(SWELL)」上に乗せてみて下さい。

右側は画像も一緒にホバーすると思います。

画像にしか効かない

SWELL

画像とキャプションに効く

SWELL

この実装方法を紹介します。

まず、以下のコードを追加CSSにコピペしておきます。


.o-swellBlocks .wp-block-image {
	margin: auto;
	padding: 0;
	position: relative;
	z-index: 0;
}
.o-swellBlocks .wp-block-image a {
	display: block;
	height: 100%;
	position: relative;
	width: 100%;
}
.o-swellBlocks a[href="###"] {
	pointer-events: none;
}
.o-swellBlocks .wp-block-image a:hover img {
	opacity: .85;
	transform: translateY(-4px);
}
.o-swellBlocks .wp-block-image img {
	display: block;
	margin: 0 auto;
	padding: 0 0 1.7em;
	transition: opacity .25s, transform .25s;
	width: auto;
}
.o-swellBlocks .wp-block-image figcaption {
	bottom: -1px;
	left: 0;
	pointer-events: none;
	position: absolute;
	text-align: center;
	width: 100%;
	white-space: nowrap;
}

\ 開くと上記コードをコピペする場所(追加CSS)が見れます! /

OPEN

管理画面メニューから、「外観」>「カスタマイズ」を選択します。

サイドバーから、「追加CSS」を選択します。

下記、赤枠内にコードを入力(コピペ)します。

SWELLブロックのリッチカラムに実装する方法

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「リッチカラム」を選択します。

(ブロック挿入ツールを切り替え)から、「ブロック」>「メディア」>「画像」を選択します。

画像を挿入します。

画像をクリック後、トップツールバーから、(キャプションを追加)を選択します。

キャプション(今回は、「SWELL」)を追加します。

画像をクリック後、トップツールバーから、(リンク)を選択します。

URL(今回は、「#」)を入力します。

トップツールバーから、リッチカラムを選択します。

(設定)から、「高度な設定」を開き「追加CSSクラス」に以下をコピペします。

o-swellBlocks

これで完了です。

リッチカラムのカラム項目に実装する方法

トップツールバーから、カラム項目を選択します。

(設定)から、「高度な設定」を開き「追加CSSクラス」に以下をコピペします。

o-swellBlocks

これで完了です。

メディアの画像に実装する方法

(ブロック挿入ツールを切り替え)から、「ブロック」>「メディア」>「画像」を選択します。

以下を終わらせた段階から解説します。

  • 画像の挿入
  • キャプションの追加
  • リンクの入力

画像とキャプションを選択します。

トップツールバーから、画像を選択します。

グループを選択します。

グループ化されました。

グループ化を選択した状態で、(設定)から、「高度な設定」を開き「追加CSSクラス」に以下を入力します。

o-swellBlocks

これで完了です。

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容