CSS Hover target other element - html

Question

When hover on the .calltoaction, the background image supposed to scale to 105%. How can I target by CSS? I'm using foundation.css for my html. A codepen has been created as well: 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">ABOUT</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">ABOUT</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

You can't do that by pure CSS, because it doesn't work that way (you can't target a parent in your case). However you could achieve this by a little jQuery function:
$('.calltoaction a').hover(function(){
$('.tile-img').css('background-size', '105%');
});
https://jsfiddle.net/wx38rz5L/2777/

Answer 2

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