html - image in div with z indexes -

html - image in div with z indexes -

there code :

<div class='f-left vignettefamille box-sizing'> <div class='relative contenuvignettefamille box-sizing' style='z-index:1;'> <br/><br/><br/><br/> <img class='absolute' src='./charte/famille/fondbasgauchevignettefamille' style='bottom:-21px;left:-4px;z-index:0;'> </div> </div>

i want div contenuvignettefamille hover image doesn't work , don't know why

edit:

there css don't know if help :

.vignettefamille{background-image:url('./charte/famille/fondvignettefamille.png'); background-repeat:no-repeat;background-position:bottom right;margin-right:16px;width:201px;margin-top:2px;padding-bottom:19px;padding-right:19px;} .contenuvignettefamille{width:100%;border:solid 4px #ffc600;}

i'm not sure if understood question correctly i'm assuming want highlight image when hovering div contenuvignettefamille?

this can solved adding css kid when hovering parent, this:

.contenuvignettefamille:hover img { opacity: 0.5; }

see fiddle here.

on note, don't utilize br tags height on div, add together height value instead. i've moved inline styling external one.

html css z-index