transition: scale(1.2);でホバー時に画像を拡大できません

0
いいねをした人: 居ません
  • このトピックには4件の返信、2人の参加者があり、最後にニックにより2年、 10ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #76199
    ニック
    閲覧者
    11

    【お使いの Snow Monkey のバージョン】最新
    【お使いの Snow Monkey Blocks のバージョン】最新
    【お使いの Snow Monkey Editor のバージョン】最新
    【お使いのブラウザ】Chrome
    【当該サイトのURL】https://hachiku.site

    ### 実現したいこと

    transition: scale(1.2);でホバー時に画像を拡大させたい

    ### 発生している問題

    デベロッパーツールではinvalid property valueと表示され、うまくいきません

    ### 試したこと

    imgの親要素に当たる以下のクラスでも、それぞれ試してみましたが、うまくいきませんでした。

    なにかお気づきの点があれば、アドバイス頂けませんでしょうか?

    どうぞよろしくお願いします。

    smb-items__item__figure

    smb-items__item

    wp-block-snow-monkey-blocks-items–item–standard c-row__col menu01

     

    0
    いいねをした人: 居ません
    #76202
    キタジマ タカシ
    参加者
    2234

    transition ではなく transform ではないですかね?

    3
    いいねをした人:
    #76229
    ニック
    閲覧者
    11

    キタジマさん、タイトルを間違えてしまいました!

    正しくは、「transform: scale(1.2);でホバー時に画像を拡大できません」です。

    失礼しました‼

    ところで、私が試したことですが、

    .smb-items__item__figure img:hover {
      transform: scale(1.2);
    }
    
    .smb-items__item__figure:hover img {
      transform: scale(1.2);
    }
    
    .wp-image-409:hover {
      transform: scale(1.2);
    }

    などです。いずれもうまくいきませんでした。
    デベロッパーツールではinvalid property valueと表示されてしまいます。
    なにかお気づきの点があれば、アドバイス頂けませんでしょうか?
    ご参考までに今の記述は以下の通りです。
    どうぞよろしくお願いします。

    /*hover時にtransform:scale()で画像を拡大表示*/
    .smb-items__item__figure {
      width: 330px;
      height: 350px;
      padding-right: 40px;
      overflow: hidden;
    }
    
    .wp-image-409 {
      width: 340px;
      height: 350px;
    }
    
    .wp-image-379 {
      width: 340px;
      height: 350px;
    }
    
    .smb-items__item__figure img:hover {
      transform: scale(1.2);
    }
    0
    いいねをした人: 居ません
    #76234
    キタジマ タカシ
    参加者
    2234

    なんでしょうね、こちらで試した感じでは問題なさそうでした。デベロッパーツールで tra とか打つと自動的に transform と補完されたり、sca と打つと scale(1.5) と補完されたりするので、全部自分で打つより補完に任せたほうが invalid property value になりにくいのではないかな?と思いました。

    3
    いいねをした人:
    #76251
    ニック
    閲覧者
    11

    キタジマさん

    解決できました‼

    微妙に記述がおかしかったようです。

    見た目では気づかなかったのですが、書き直したら動きました!

    なんとか自己解決できましたが、サポート心強かったです。

    ありがとうございます!

    取り急ぎ、お礼まで。

    1
    いいねをした人:
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「transition: scale(1.2);でホバー時に画像を拡大できません」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。