マウスオーバー時に他要素も変化させたい

画像とテキストを組み合わせてメニューボタンを作成したいと考えています。

・サンプル
http://www.nissay.co.jp/
「保険をご検討中のお客様」部分、右の4つの画像のようなメニューボタンです

・上は画像
・下は半透明の白帯があり、テキストと矢印（アイコンフォント使用）
・マウスオーバー時は画像が拡大&半透明の白帯の色が変更&アイコンフォントの矢印が5px分右に移動する
※アイコンフォントはhttp://ionicons.com/#cdnを使用しています

なんとか形になったのですが、メニューのうち、画像部分をマウスオーバーすると
画像は拡大しますが、白帯の色が変わりません。
白帯部分をマウスオーバーすると、白帯の色は変わりますが、画像は拡大しません。
隣接要素の「+」、兄弟要素の「>」を組み合わせるのだと思いますが、中々うまくできません。
どなたか、方法をご存知のかた、教えていただけないでしょうか。
よろしくお願いします。

html
1<div class=“menu”>
2<div class=“menu-1”>
3<a href="#">
4<img src="img.png" alt="">
5<h1>メニュー<span class="ion-android-arrow-forward"></span></h1>
6</a>
7</div>
8</div>

css
1.menu-1
2{overflow: hidden}
3
4.menu img{
5	width:100%;
6	height:auto;
7	vertical-align: bottom;
8	-moz-transition: -moz-transform 0.5s linear;
9	    -webkit-transition: -webkit-transform 0.5s linear;
10	    -o-transition: -o-transform 0.5s linear;
11	    -ms-transition: -ms-transform 0.5s linear;
12	    transition: transform 0.5s linear}
13
14.menu h1{
15	font-size: 16px;
16	margin-top: 10px;
17	padding-left:10px;
18	height:35px;
19	padding-top: 5px;
20	margin-bottom:0px;
21text-align: left;
22bottom:0;
23color: #000000;
24background-color: rgba(255,255,255,0.8);
25position:absolute;
26width:100%;
27-moz-box-sizing:border-box;
28-webkit-box-sizing:border-box;
29box-sizing: border-box}
30
31.menu span{
32color:#DC143C;
33margin-left:5px;
34font-size:14px}
35
36.menu a{
37	text-decoration: none;
38position: relative;}
39
40.menu h1:hover{
41	background-color: #ffffff;
42  }
43
44.menu img:hover{
45	-webkit-transform: scale(1.1);
46	-moz-transform: scale(1.1);
47	-o-transform: scale(1.1);
48	-ms-transform: scale(1.1);
49	transform: scale(1.1)}

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

回答1件

ベストアンサー

imgをhoverと考えるのではなく.menuをhoverしたらと考えるといいと思います。

css
1.menu img:hover{
2    -webkit-transform: scale(1.1);
3    -moz-transform: scale(1.1);
4    -o-transform: scale(1.1);
5    -ms-transform: scale(1.1);
6    transform: scale(1.1)}
7 ↓
8.menu:hover img{
9    -webkit-transform: scale(1.1);
10    -moz-transform: scale(1.1);
11    -o-transform: scale(1.1);
12    -ms-transform: scale(1.1);
13    transform: scale(1.1)}