画像以外の場所をホバーした時に画像を拡大したい

Question

現在、画像部分をホバーすると画像が拡大するアニメーションと、「READ MORE」にホバーした際に左から色が変わる動きをつけています。

画像が拡大するという動きを画像以外の箇所（下の画像でグレーで示している範囲）にカーソルが入った際に、適用されるようにしたいのですが方法が分かりません。
（READ MOREにカーソルを合わせた時には、「色が変わる＋画像が拡大する」としたいと思っています）

通常時

READMOREホバー時

グレーの範囲にカーソルが入った時に画像を拡大させたい

現在、下記記述をしています。

<div class="list-1">
<a href="url">	
	<div class="cp_imghover cp_zoomin">
	　<img src="no-image.jpg">
	</div>
</a>
<a href="url">	
	<h2>Company</h2>
	<p>会社概要</p>
</a>

<div class="list-btn">
	<a href="url">READ MORE</a>
</div>
</div>

/*画像ズーム*/
.cp_imghover-a {
overflow: hidden;
cursor: pointer;
}
/*zoomin*/
.cp_zoomin img {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.cp_zoomin-a img:hover {
-webkit-transform: scale(1.05,1.05);
transform: scale(1.05,1.05);
}
.list-btn{
  text-align: center;
}
.list-btn a{
  box-sizing: border-box;
  display: inline-block;
  width: 95%;
  height: 45px;
  text-align: center;
  line-height: 45px;
  font-size: 11px;
  letter-spacing: 2px;
  outline: none;
  margin-left: 0;
  font-weight: 700;
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 1px solid #44504d;
  color: #44504d;
  overflow: hidden;
}
/*ホバー時の動き*/
.list-btn a::before,
.list-btn a::after{
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.list-btn a,
.list-btn a::before,
.list-btn a::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .4s;
  transition: all .4s;
}
.list-btn a:hover{
  color: #fff;
}
.list-btn a::after{
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
}
.list-btn a:hover::after{
  left: 0;
  background-color: #687c76;
}

css勉強中です。質問内容が分かりづらかったら申し訳ありません。
上記cssはh2やpに対しての記述は省いています。

やりたいこと

①グレーで示した範囲にカーソルがくると画像が拡大する。
②READMOREの箇所にカーソルが来た時はREADMOREのホバーエフェクト＋画像が拡大する動きをつけたい

お力いただけると助かります。
JavaScriptではなくCSSで出来る方法の方が好ましいです。
よろしくお願いいたします。

Answer 1

:not()を使ってみては？

Comments

[m.ts10806]

JavaScript利用もありますが、タグと質問内容からその方向は検討されてないかもしれないので、ひとまずCSSで実現可能そうなヒントを回答としました。

[kizunami]

ご回答ありがとうございます！JavaScriptではなくCSSで出来る方法の方が好ましいです。
:not()を使う場合、全体にホバー時拡大するようにして、h2,p,list-btnを:not()とするということなのでしょうか・・・？
（擬似クラスがまだ勉強不足でして、詳しくお教えいただけたら嬉しいです。）

[m.ts10806]

「列挙されたセレクターに一致しない要素」(ドキュメントそのまま)なので、適用「させたくない」要素を指定します。
ドキュメントのミニマムコードも参考にやってみてください

[kizunami]

ご丁寧にありがとうございます！今回は他の方のやり方で解決いたしましたが、擬似要素も使いこなせるよう勉強していきたいと思います。ありがとうございました！

Answer 2

普通にdiv[class^="list"]:hover img{}で良いかなとも思うのですが，

pointer-eventsを使うと，逆パターン（一部に:hoverで，全体にcssをかける）も実装できて楽しいですよ

• [CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック

内包要素だけ除外，というのができるかは後で試してみます

Comments

[kizunami]

ご回答ありがとうございます！
今回は他の方のやり方で解決いたしましたが、いただいた方法も今後活用出来るよう、勉強していきたいと思います。ありがとうございました！

Answer 3

hoverのヒットエリアを子要素の領域だけ除外、というのはなかなか難しいと思います。
hoverの定義を重ね合わせして、imgをhoverしたときはscaleを元に戻してやればどうでしょう。

.list-1:hover .cp_zoomin img{
  -webkit-transform: scale(1.05,1.05);
  transform: scale(1.05,1.05);
}
.list-1>.cp_zoomin:hover img{
  -webkit-transform: scale(1.00,1.00);
  transform: scale(1.00,1.00);
}

単に.cp_zoomin:hover imgの定義では効かないので、.list-1>.cp_zoomin:hover imgとlist-1の子要素として指定してやらなければいけないようです。