css - div を別の div の後ろに置く

Question

このような構造を想像してください:

<div class="background">
  <div class="object"></div>
</div>
<div class="foreground"></div>

私のCSSでは、foregroundホバーbackground 時にオブジェクトのプロパティを変更したい（つまり.object:hover{}）私のobject内部を移動しforegroundたり、jsを使用したりせずにCSSでそれを行う方法はありますか？

更新：尋ねられた私のcss。

.background { background:url('background.svg') no-repeat; }
.foreground { background:url('foreground.svg') no-repeat 50% 50%; }
.object {
 position: absolute;
 top:10px;
 left:10px;
 opacity:1;
}

.object:hover 
{
  opacity:0.5;
}

Answer 1

上に表示したい div:hover の z-index を高くします。