[ 解決済 ] VK Blocks Proの投稿リスト→カード表示のアイキャッチをマウスオーバーでズームさせたい

[M Y]

■ WordPress のバージョン
5.9.3

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

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

■ テーマのバージョン
14.20.2

■ Pro Unit のバージョン
0.1.5

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
カスタマイズの質問で恐縮です。
知恵をお貸しください＜(＿ ＿)＞

VK Blocks Proの投稿リストで表示タイプを「カード」タイプで
サムネイル画像を表示させたパターンのときに
マウスオーバーで画像をズーム表示にしたい。
（カード（インテキスト）以外）

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

■ 自分で試した事
スタイルシートで何とかなると思い、
自分なりにカスタマイズをしてみたのですが、
惜しい、感じです。※画像を添付しました。

.card-noborder .vk_post_imgOuter{
overflow: hidden;
background-size: cover;
transition: transform .6s ease;
}

.card-noborder .vk_post_imgOuter:hover{
transform: scale(1.1);
}
※上記はカード（線なし）版

どこかのサイトから見よう見まねでコピペしてきましたが
そもそも、設定する箇所が間違っているような気がします。

上記ですと、サムネイルの高さのみ、はみ出してしまいます。
（動画添付します）

どなたか・・知恵をお貸しいただけないでしょうか。。

■ 症状が発生するブラウザ
Edge　Firefox　Chrome

■ 実際の症状
サムネイルの高さのみ、はみ出してしまいます。

そもそもスタイルシートの設定方法が間違っているのだと思います。

Attachments:

You must be logged in to view attached files.

[うなこ]

確認しましたところ、.vk_post_imgOuterのdivの背景に背景画像を設定していますので、もうひとつ外側に画像を囲うdivタグが必要な気がします。（この外側のdivにoverflow: hidden;を指定してはみ出した部分を非表示にするかたち）

ちょっと考えてみます。

[対馬 俊彦]

たぶん、下にはみ出しているのを隠せばいいので、
.card-body を被せてやったらうまくいきそうな気がします。

.vk_post .vk_post_imgOuter {
    z-index: 1;
}

.vk_post .card-body {
    z-index: 2;
    background-color: #fff;
}

[M Y]

うなこさん、対馬さん、

早々に反応いただきまして、ありがとうございます。

対馬さんのコードを貼り付けたら、はみ出すことなくうまく行きました！

各デバイスでの表示も問題ありませんでした。

ありがとうございます（涙

↓今のところコードはこんな感じです！

.card-noborder .vk_post_imgOuter{
overflow: hidden;
background-size: cover;
transition: transform .6s ease;
width: 100%;
}
.vk_post .vk_post_imgOuter:hover{
transform: scale(1.1);
}
.vk_post .vk_post_imgOuter {
z-index: 1;
}
.vk_post .card-body {
z-index: 2;
background-color: #fff;
}

[うなこ]

対馬 さま
なるほど！思いつきませんでした！ありがとうございます！

M Yさま
解決したとのことで安心しました！

[投稿者]

投稿