ホバリング時に画像を拡大する2列のレイアウト

Question

私は2列のレイアウトを持ち、左側の列はテキストで、右側の列は画像です。私が達成したいのは、ユーザーが左の列を上に移動すると、背景の画像を持つ右の列がズームし、もちろんユーザーが右の列の上を移動すると画像も拡大するということです。

問題は、左の列の上にユーザーのホバーは、私は右の列の画像は、同様に

両方のカラムを拡大したいときに、同じリンクを持っているということです。私はこのリンクのためのjsのバイブルを作った： https://jsfiddle.net/jqztf3nv/

助けていただければ幸いです。

コード

<div id="article-row"> 
    <a title="more" href="http://google.com" target="_blank"> 
     <div class="left-col"> 
      <h1> 
      Lorem ipsum dolor sit amet 
      </h1> 
      <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam quis mollis ante. Ut sapien est, gravida in turpis vitae, accumsan egestas nunc. Etiam porttitor, felis ac lobortis faucibus 
      </p> 
     </div> 
    <div class="article-top zoomimg"></div></a> 
</div> 


#article-row { 
width: 100%; 
margin: auto; 
} 
.left-col { 
width: 50%; 
float: left; 
height: 300px; 
} 
.zoomimg { 
display: inline-block; 
width: 100%; 
height: 300px; 

background-size: 100% 100%; 
background-repeat: no-repeat; 
background-position: center center; 
transition: all .5s ease; 
position: relative; 
} 
.zoomimg:hover { 
cursor: pointer; 
background-size: 150% 150%; 
} 
.article-top { 
background-image: url(https://static.pexels.com/photos/128442/pexels-photo-128442.jpeg); 
float: right; 
width: 50%; 
height: 300px; 
} 

.zoomimg:after { 
position: absolute; 
background-color: rgba(0,0,0,.35); 
content: attr(title); 
font-family: sans-serif; 
padding-top: 250px; 
font-size: 2em; 
color: #fff; 
top: 0; 
left: 0; 
width: 100%; 
height: 300px; 
opacity: 0; 
transition: opacity .5s linear; 
box-sizing: border-box; 
} 
.zoomimg:hover:after { 
opacity: 1; 
} 

Answer 1

おかげでのみあなたがする必要がある変更するには、このCSSルール置き換えです：で

.zoomimg:hover { 
    cursor: pointer; 
    background-size: 150% 150%; 
} 

を：

#article-row:hover .zoomimg { 
    cursor: pointer; 
    background-size: 150% 150%; 
} 

更新しフィドルを参照してください。