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

2024/05/122025/02/04

SWELLの購入やWordPressへのインストールがまだの方は以下の記事を参考に導入できます。

あわせて読みたい

SWELLの購入とインストール方法を解説 SWELLの購入とインストール方法を知りたいですか？本記事では、会員登録やDiscordコミュニティへの参加方法、SWELLを使うために必須な認証方法、未使用テーマを削除する理由まで解説しています。SWELLを使いたい方は是非ご覧ください。

こちらの記事で完了すること

購入
会員登録
Discordコミュニティ登録
WordPressへのインストール（親テーマと子テーマ）
ユーザー認証
使わないテーマの削除

では、本題に入ります。

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

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

本記事で解決できること

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

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