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

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

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

  • このトピックには4件の返信、3人の参加者があり、最後にうなこにより4週、 1日前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #64440

    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.
    #64465

    うなこ
    モデレーター

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

    ちょっと考えてみます。

    #64468

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

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

    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;
    }

    #64470

    うなこ
    モデレーター

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

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

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。