[ 解決済 ] カバーブロックの画像をマウスオーバーでズームさせたい

[Hokoku_kinzoku]

■ WordPress のバージョン
6.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.8.2

■ Pro Unit のバージョン
0.24.1

■ スキンの種類
Origin III

■ 期待する動作
カスタマイズの質問で申し訳ありません。

カバーブロックの画像をマウスオーバーした時、画像を透過させるかつズーム表示にさせたいです。

画像の大きさは変えないで枠の中でズームさせたいです。

■ 自分で試した事

カバーブロックのカスタムCSSで自分なりにカスタマイズをしてみたのですが上手くいきません。

※動画を添付しました。

.wp-block-cover{
max-width:334px;
max-height:339px;
overflow:hidden;
}

.wp-block-cover:hover{

-moz-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
background-color: #fff;

opacity:0.5;
filter:alpha(opacity=50);
-ms-filter: “alpha( opacity=50 )”;

}

■ 症状が発生するブラウザ
Safari,Chrome

■ 実際の症状
どうしても元の枠の中で収まらず、画像の大きくなってしまいます。

(33 / 33 / 33したカラムにそれぞれカバーブロックをいれ、1つあたりwidth:334pxheight:339pxで枠サイズを収めたいです）

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

用途から考えると、
ご質問の内容に加えてカバーブロック全体にリンクを設定したくなるので、
レスポンシブ対応まで考えていちからカスタマイズすると
けっこうなボリュームの CSS を書く必要があります。

そこで…

VK パターンライブラリ の 工務店TOP をコピーすると、
下の方に4カラムのバナー (会社案内～役立ちブログ) があります。

カバーブロックの動作はご希望にマッチしていると思います。

このカラムブロックをコピーして、それを元に作ってみたらよさそうです。

工務店TOP

[Hokoku_kinzoku]

ご回答ありがとうございます！

VK パターンライブラリ の 工務店TOP（下の方に4カラムのバナー） をコピーし、
無事、カバーブロックの画像をマウスオーバーした時、画像を透過させるかつズーム表示させることができました。

ご丁寧に説明いただきありがとうございました！

[投稿者]

投稿