マウスホバーすると画像がズームされるようにしたいです

Question

前提・実現したいこと

下記のサイト内の、Cのように、
マウスホバーすると画像がズームされるようにしたいのですが
静止画のままになってしまいます。

発生している問題・エラーメッセージ

ファイル名、格納場所は同じなのに、
上書きした単色の画像に差し替えるとズームしなくなってしまいます。

エラーメッセージ
メッセージは特に表示されません

該当のソースコード
■■■ main.css ■■■

.list-card__item:nth-child(2) {
-webkit-transition-delay: .05s!important;
-moz-transition-delay: .05s!important;
-o-transition-delay: .05s!important;
transition-delay: .05s!important
}

.list-card__item:nth-child(3) {
-webkit-transition-delay: .1s!important;
-moz-transition-delay: .1s!important;
-o-transition-delay: .1s!important;
transition-delay: .1s!important
}

### 試したこと

拡張子を変更する、URLを変更する、、全くわからない状態です

main.css も関係あるのではと眺めたりしたのですが、、、
わからない状態です。
お手数ですが、ご教示をお願い致します。

Comments

[n_takapyon]

サンプルサイトを見る限り中央から拡大をしつつ、領域外にはみ出た部分については表示しない挙動だと感じます。
単色の画像では拡大されてもわからないと思うのですが。。
別の画像に置き換えてもダメな状況でしょうか

[nimi1836]

ご確認をありがとうございます。色々と説明が下手で申し訳ありません。
A、Bにはグラデをかけており、拡大された際にも色の変化でわかるのでは、、と思っておりました。
が、「かけているグラデーションが微差」すぎて、変化をしていないものと感じてしまっておりました。
基本的な認識ミスでおさわがせしてしまい申し訳ありません。
初めての質問でしたので、すぐにお答えいただき感動しました。
いろいろと、ありがとうございました。

[kei344]

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

[nimi1836]

解決済みにする方法を探し回ったのですが見つけられず、困っておりました。。
すぐに対応したいと思います、いろいろとありがとうございました！

Answer 1

<style>
image{
  transition: all 0.2s ease-out 0s;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
}
image:hover{
  transition: all 0.7s ease-out 0s;
  transform: translate3d(-100px, -75px, 0px) scale3d(2, 2, 2);
}
</style>
<svg width="200" height="150" id="hoge"> 
<image xlink:href="https://placehold.jp/ff0000/00ffff/200x150.png?text=test1" width="200" height="150" x="0" y="0" alt="1" />
</svg>

Comments

[nimi1836]

一度では理解できなかったのですが、いろいろと見比べ、参考にしたいと思います。
的確なご回答をありがとうございました！

[nimi1836]

結果としては自己解決いたしました。（「かけているグラデーションが微差」すぎて、変化をしていないものと感じてしまっておりました。）

n_takapyonさま：私が最初に質問をした時に、すぐに助けてくださりありがとうございました。心よりお礼申し上げます。
kei344さま：サイト中を確認しても見つけられなかった利用方法を教えてくださりありがとうございました。ご親切を心よりお礼申し上げます。
yambejpさま：具体的な例をご教示いただきありがとうございました！