【OnePress】TEAMセクションのホーバー時の画像変化をカスタマイズする方法

「OnePress」テーマのデフォルトでは、TEAMセクションの画像をマウスオーバーした際にも以下のスタイルコードが割り当てられていて、1秒かけて透明度を上げるようになっています（実際にこのデモサイトトップページの「チーム」の部分で確認ください）。

.team-member .member-thumb:hover img {
  opacity: 0.7;
  transition: all 0.1s linear;

}

これを変更する方法の例を2つ紹介します。

いずれもテーマカスタマイザーの「追加CSS」や子テーマのstyle.cssへ追加することで機能します。

環境によってはキャッシュのクリア（キーボードの「Ctrl」＋「F5」）が必要だったり、うまくスタイルが上書きされないことがありますので、環境に合わせて調整してください

ホーバー（マウスオーバー）時の変化をなしにする

マウスオーバー時の変化をなしにするには以下のように記述します。

.team-member .member-thumb:hover img {
  opacity: unset;
  transition: unset;
}

単純に「unset」で打ち消すだけです。

ホーバー（マウスオーバー）時に中の画像が少し拡大するようにする

本デモサイトのトップページの「ギャラリー」のように、マウスオーバーで中の画像が大きくなるようにするコードです。

/* 親要素ではみ出た部分を非表示にする */
.team-member .member-thumb {
	overflow: hidden;
}
/* 表示時・マウスオーバーが外れた時1秒かけて元に戻す */
.team-member .member-thumb img 
{
	transition: 1s all;
}
/* マウスオーバー時、デフォルトの透明度指定を解除し、縦横1.2倍に1秒かけて拡大する */
.team-member .member-thumb:hover img{
	transform: scale(1.2,1.2);
	transition: 1s all;
	opacity: unset;
}

この方法については以下で詳しく書いていますので参考にしてみてください。

https://habone.biz/4321