CSSホバーターゲット他の要素

Question

.calltoactionの上にマウスを置くと、背景画像は105％に拡大されます。 CSSでどのようにターゲットを設定できますか？私は自分のhtmlにfoundation.cssを使用しています。 codepenは、同様に作成されています：http://codepen.io/rezasan/pen/dpyoYO

HTML：

<div id="tiles"> 
<div class="row"> 
<div class="medium-6 columns nopadleftright tile-img" style="background-image:url('http://placehold.it/300x300');"></div> 
<div class="medium-6 columns nopadleftright text-center"> 
    <div class="v-align"> 
    <h1 class="preheader text-center">EXPERIENCES</h1> 
    <h1>A Magical Location</h1> 
    <p>Text</p> 
    <div class="calltoaction"><a href="#">ABOUT</a></div> 
    </div> 
</div> 
<div class="row"> 
    <div class="medium-6 columns nopadleftright text-center"> 
    <div class="v-align"> 
    <h1 class="preheader text-center">EXPERIENCES</h1> 
    <h1>A Magical Location</h1> 
    <p>Text</p> 
    <div class="calltoaction"><a href="#">ABOUT</a></div> 
    </div> 
</div> 
<div class="medium-6 columns nopadleftright tile-img" style="background-image:url('http://placehold.it/300x300');"></div> 

CSS：

#tiles .row .medium-6 { 
    width:45%; 
    float:left; 
    height: 185px; 
    background-color: #fff; 
    padding:0 10px; 
} 

#tiles .row .tile-img{ 
    background-repeat: no-repeat; 
    background-position: center center; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    transition: background-size .3s ease-in-out; 
    -moz-transition: background-size .3s ease-in-out; 
    -ms-transition: background-size .3s ease-in-out; 
    -o-transition: background-size .3s ease-in-out; 
    -webkit-transition: background-size .3s ease-in-out; 
} 

#tiles .calltoaction a:hover + .tile-img { 
    background-size: 105%; 
} 

Answer 1

よそのようには機能しないため、純粋なCSSで行うことはできません（あなたの場合は親をターゲットにすることはできません）。しかし、あなたは少しjQueryの機能によってこれを実現できます。

$('.calltoaction a').hover(function(){ 
    $('.tile-img').css('background-size', '105%'); 
}); 

https://jsfiddle.net/wx38rz5L/2777/

Answer 2

使用の背景サイズ：ホバーの105％

#tiles .row .tile-img:hover { 
    background-size:105%; 
    }