CSSだけを変更して画像にマウスオーバー処理を適用したい

###前提・実現したいこと
HTML CSSでマウスオーバーで画像にエフェクトを追加させる処理を作っています。
CSSだけ変更して二つの画像に共通の処理(マウスオーバーで画像を中心に拡大する)を行わせたいのですが、どちらかにマウスオーバーするだけで両方とも拡大してしまい、思い通りの処理に辿り付けていません。
もしかしたらHTMLの記述自体(<div>の部分)が間違っているかもしれません。

どうすればCSSだけを変更して個別にマウスオーバーの処理が動作するようになるのでしょうか。
アドバイスお願いします。

###該当のソースコード
index.html

<!DOCTYPE html>
<html lang = "ja">
	<head>
		<link rel = "stylesheet" href = "sample.css">
	</head>
	<body>
		<div class = "buttonExpansion">
			<img src = "image0.png" class = "image0">
			<img src = "image1.png" class = "image1">
		</div>
	</body>
</html>

sample.css

/* 拡大 */
.buttonExpansion:hover{
		transform: scale(1.2);
}

/* 画像image0に適用 「拡大」以外の処理はなし */
.image0{
}

/* 画像image1に適用 「拡大」と「影付け」の処理 */
.image1:hover{
	box-shadow: 2px 2px 4px #CCC;
}

###試したこと
「拡大」の処理をそのままそれぞれのクラスに書いたりした
(勿論思い通りの挙動になるが、可能な限り「拡大」のクラスと画像ごとに適用するクラスを別に分けて実装したい)

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

回答1件

ベストアンサー

以下のように行うとどうでしょうか？

CSS
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="sample.css">
7    <style type="text/css">
8        /* 拡大 */
9        img:hover {
10            transform: scale(1.2);
11        }
12
13        /* 画像image0に適用 「拡大」以外の処理はなし */
14        .image0 {
15        }
16
17        /* 画像image1に適用 「拡大」と「影付け」の処理 */
18        .image1:hover {
19            box-shadow: 2px 2px 4px #CCC;
20        }
21    </style>
22</head>
23<body>
24<div class="buttonExpansion">
25    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1" class="image0">
26    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2" class="image1">
27</div>
28</body>
29</html>