css - Child overlapping its parent's sibling on hover

Question

So, here's the first div:

<div id="parent">
<a>
<div>
<img />
<h3 id="important_text">text</h3>
</div>
</a>
</div>

The second div structure is more or less the same...

<div id="sibling">
<a>
<div>
<img />
<h3 id="important_text_n2">text</h3>
</div>
</a>
</div>

What I want: When I hover #parent, I want #important_text (just the h3#important_text, not the whole div!) to overlap the #sibling (his child img actually). And when I am NOT hovering #parent, I want the #sibling to overlap #parent.

I've tried it with z-index, but I just can not get #important_text to overlap its parent's sibling (#sibling).

---

EDIT:

Used (not working CSS):

#parent {
z-index: 5;
}
#sibling {
z-index: 15;
}
/* option 1 */
#parent:hover a div h3 {
    z-index: 20;
}
/* option 2 ... here I wanted to decrease the sibling img's z-index to a value between #parent and #important_text, but I didn't work either. */

Answer 1

H3 要素に絶対位置を指定します。例：

CSS:

h3{
   position:absolute;
   margin-top: -20px;
}