transformのscaleが反映されない

Question

chromで作業しているのでプレフィックスをつけたりしてみましたが改善されません。
マウスオーバーした時に画像が拡大されるような仕様にしたいです。

<div class="img-b">
  <img src="img/news.kei1.jpg">
  <h3>FROM KEI<br>2018.10.10</h3>
</div>

.img-b, .img-b-2 {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 306px;
}

.img-b img {
  vertical-align: bottom;
  transition: transform 0.5s linear;
  -webkit-transition: transform 0.5s linear;
}

.img-b img:hover {
  transform: scale(1.5,1.5);
  -webkit-transform: scale(1.5,1.5);
}

Comments

[退会済みユーザー]

何がうまくいかないのかを明確に記載してゴールを明確に記載してください。

[m.ts10806]

「うまくいかない」だけでは本人以外に現象伝わりませんよ。何を目的としたものかも分からないので得たい回答は得られません。

[tunnel]

すみません。編集します。

Answer 1

やりたかったのはこういうことでしょうか？？？

画像にマウスホバーしたときにテキストに重ならないで特定の範囲内で画像だけを拡大する。
動くサンプルを用意したのでご確認ください。

動くサンプル：https://jsfiddle.net/fmj3suqt/1/

Comments

[tunnel]

そうです。質問boxのcssの後半が記入漏れしてしてました。