画像の上に乗っている文字の色を画像をホバーしたときに変更させたい

Question

前提・実現したいこと

画像部分をホバーするとh5の文字色を元の色のオレンジから白に変更させたい

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

色が変わらない

該当のソースコード

HTML↓

<div class="takeout"> <a href="#"> <img src="img/hutta1.jpg" alt=""> <div class="takeoutbun"> <h5>お持ち帰りメニュー</h5> <p>お家でゆっくり居酒屋気分はいかがですか？<br>お電話にてご注文承ります。</p> </div> </a> </div>

CSS↓
.takeout{
overflow: hidden;
position: relative;
max-width: 100%;
background-color: orangered;
}

.takeout img{
max-width: 100%;
vertical-align: top;
}

.takeoutbun{
  font-size: 16px;
  color: #fff;
  position: absolute;
  top:70px ;
  left: 20px;
  pointer-events: none;
}

.takeoutbun h5{
  color: orangered;
  font-weight: normal;
  font-size: 23px;
}

.takeout img:hover {
  transform: scale(1.2);
  opacity: 0.7;
}

試したこと

　
color:#fffを入力するセレクターを変えてみたり、hoverの範囲を変えてみたり自分で考えれることは試しました。

補足情報（FW/ツールのバージョンなど）

・画像部分をホバーすると
①画像が枠内で前に飛び出たようになる
②その際、画像の上に乗っている文字のサイズは変わらない
③画像全体がオレンジのフィルターがかかったようになる

上記はどうにか自分でできましたが、あと一つ、「h5が白色になる」ことだけが、どうしてもクリアできません。どなたか助言いただければ幸いです。よろしくお願いいたします。

Answer 1

画像とテキストをラップしているtakeout（もしくはその下のaタグ）がhoverしたときにスタイルを変更するのがいいと思います

.takeout:hover .takeoutbun h5{
color: #fff
}

.takeout:hover img{
transform: scale(1.2);
opacity: 0.7;
}

もし、文面の通り画像をホバーしたときのみ（takeout内に他の要素が含まれる）にしたい場合は隣接セレクタを使い指定した要素の直後のtakoutbtnを指定するといいでしょう。

.takeout img:hover {
transform: scale(1.2);
opacity: 0.7;
}
.takeout img:hover + .takeoutbun h5{
  color: #fff;
}

Answer 2

.takeout:hover h5 {
  color: #fff;
}

上記を追加してみてください。

Comments

[kgtsk]

お二人とも回答ありがとうございました。どちらも私のベストアンサーなので、早く回答頂けた方にしました。