[ニック]

【お使いの Snow Monkey のバージョン】最新
【お使いの Snow Monkey Blocks のバージョン】最新
【お使いの Snow Monkey Editor のバージョン】最新
【お使いのブラウザ】Chrome
【当該サイトのURL】LocalByWheelで環境構築してます

 

Snow Monkeyを使い始めて約１ヶ月のニックと申します。

以下の問題で詰まっておりますので、お力をお貸し頂ければ大変ありがたいです。

 

### 実現したいこと

hover時にtransform:scale()で画像を拡大表示させたい

 

### 発生している問題

適切にクラスが選べていないのかもしれませんが、スタイルが当たりません…

 

### 試したこと

左上の「ランチ」という画像にhoverした際に、枠からはみ出さずに画像だけズームするよう追加CSSを記述してみましたが、うまくいきません…何かお気づきの点があれば、ご指摘頂けませんでしょうか？どうぞよろしくお願いします。

♥ 0

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

[yasuki]

.smb-items__banner__figure{
	overflow:hidden;
}

これもだめですよね？

♥ 1

いいねをした人:

[キタジマ タカシ]

こんな感じですかね？

.smb-items__banner img {
    transition: transform .2s;
}

.smb-items__banner:hover img {
    transform: scale(1.2);
}

♥ 1

いいねをした人:

[ニック]

yasuki様

アドバイスありがとうございます！

試してみましたが、変化はありませんでした。

ところで、初期設定では、「ランチ」画像の枠の下辺だけが下に伸びるようになっていますが、その伸びをストップさせたいです。

その際もoverflow: hidden;でいいのでしょうか？

ちなみに、現在の追加CSSは添付の通りです。

 

キタジマ様

いつもお世話になります。

scale(1.2)がワークしました！

ありがとうございます！

ところで、初期設定では、「ランチ」画像の枠の下辺だけが下に伸びるようになっていますが、その伸びをストップさせたいです。

その際もoverflow: hidden;でいいのでしょうか？

現在の追加CSSは添付の通りですが、スタイルがうまく当たっていません。

もし何かお気づきの点がございましたら、アドバイス頂けると大変ありがたいです。

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

♥ 0

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

[キタジマ タカシ]

こちらの環境でははみ出さずに動作しているので、ご自身で追加された CSS が影響したりしていませんかね？ 実際の画面を見てみないとなんともわかりませんが、ブロックの一番外側を overflow: hidden するのが一番簡単では？と思います。

.smb-items__banner {
  overflow: hidden;
}

ただ、こうやってどんどん CSS を追加すると後方互換性の維持やメンテナンスが難しくなるので、個人的には根本の原因を探って対処するのが良いと思います。

♥ 2

いいねをした人:

[ニック]

キタジマさん、追加のアドバイスありがとうございます！私の環境では、どうしてもはみ出してしまいますので、おっしゃる通り根本原因を探した方が良さそうです。一度、このトピックを閉じて、自分なりに探ってみますね。ありがとうございました！

♥ 1

いいねをした人:

[投稿者]

投稿