マウスオーバー時のスライド動作制御について

以下サイトの模写を行なっているのですが、一番右側のみマウスオーバーのアクションが起きない理由って何かわかりますでしょうか？
https://www.nisshin.com/welnavi/magazine/

検証で見る限り、is-touchedというクラス名が付加されているので、addClassでhober時につけているのだとは思いますが、
何故が三つ目のみ、そのアクションが起きない状態になっています。

is-touchedでhoverした際のスライドアクションするcssも検証ツールからでは見つけられず、困っています。
おそらくこうだろうという回答でも大丈夫ですので、教えていただけるとありがたいです。

よろしくお願い致します。

yambejp

2020/10/27 03:38

> 一番右側のみマウスオーバーのアクションが起きないをもう少し詳しく説明してください

gerick

2020/10/27 03:46

コラムが三つ並んでいる箇所で、全粒粉と糖質制限の画像にマウスをhoverさせると画像が右下にスライドされ、背景に薄くある色が重なってなくなる動作が確認できると思います。ただ、3つめのライザップの画像を同じようにhoverしても、is-touchedは付加されているのですが、同じような画像がスライドする動作が起きないようになっています。これでわかりますでしょか...？＞＜

行動規範の内容に同意します

回答1件

これはJavascript関係ありません。cssでアニメーションさせています。
実際にJavascriptを切って試してみても動作しました。
どこでこの設定をしているかというと
main.cssで設定してました。
main.cssファイルの中身を下記コードで検索して下さい。

css
1.kp-c-card-md:not(:last-child) .kp-c-card_img_inner:hover

下のコードが見つかると思います。

css
1@media (min-width: 1024px) {
2  .kp-c-card-md:not(:last-child) .kp-c-card_img_inner:hover {
3    -webkit-transform: translate3d(10px, 10px, 0);
4            transform: translate3d(10px, 10px, 0); 
5    -webkit-box-shadow: none; 
6            box-shadow: none;
7  }
8}