As noted in the comments, this isnt possible in the way you are currently implementing.
CSS rules depend on degrees of decendancy and cannot traverse the DOM, by say, ascending up one parent level, then moving across and back down (in layman terms). They are limited to only identifying siblings and children.
The content
style is also only available to :before
and :after
pseudo elements.
As such, the alternative would be to apply the operation to the active
state of the parent elements, removing the child images, and referencing the background-image
and not content
property e.g.:
Demo Fiddle
HTML
<section id="sect">
<div class="three columns"></div>
<div class="one column"></div>
</section>
CSS
.column, .columns {
height:200px;
width:200px;
background-image:url(http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg);
background-size:cover;
}
.three.columns:hover ~ .one.column {
border:1px solid red;
background-image:url(http://upload.wikimedia.org/wikipedia/commons/9/9c/Image-Porkeri_001.jpg);
}