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

♥ 0

いいねをした人: 居ません

このトピックには4件の返信、2人の参加者があり、最後にニックにより3年、 6ヶ月前に更新されました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)

投稿者

投稿
2021年5月20日 7:01 PM #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

いいねをした人: 居ません

2021年5月20日 7:05 PM #76202

キタジマタカシ
参加者

♥ 2421

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

♥ 3

いいねをした人:

2021年5月21日 9:00 AM #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

いいねをした人: 居ません
2021年5月21日 9:15 AM #76234

キタジマタカシ
参加者

♥ 2421

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

♥ 3

いいねをした人:

2021年5月21日 9:49 AM #76251

ニック
閲覧者

♥ 11

キタジマさん

解決できました‼

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

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

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

ありがとうございます！

取り急ぎ、お礼まで。

♥ 1

いいねをした人:
投稿者

投稿