probleblemi con le transition

[napster87]

Salve a tutti, sto cercando di usare le transizioni css, ma non riescoad effettuare ci� che voglio. Il codice scritto � il seguente:
PAGINA HTML

<div id="box-cd">
        <div id="primo">Sono il primo figlio</div>
</div>

CODICE CSS

#box-cd {
    width: 32%;
    height: 350px;
    border: solid 3px;
    position: relative;
    float: left;
    margin-right: 15px;
    margin-left: 3px;
    background-color: blue;
}
#primo {
    position: absolute;
    height: 100px;
    background-color: yellow;
    top: 350px;
    visibility: hidden;
    float: left;
    border: solid 3px;
    margin-left: -3px;
}
#box-cd:hover > #primo {
    background-color: red;
    height: 100%;
    width: 1227px;
    visibility: visible;
    transition-property: background-color, height, width, visibility;
    /*standard*/
    
    transition-duration: 2s, 2s, 4s, 2s;
    -webkit-transition-property: background-color, height, width, visibility;
    /*Safari e Chrome */
    
    -webkit-transition-duration: 2s, 2s, 4s, 2s;
    -o-transition-property: background-color, height, width, visibility;
    /*Opera*/
    
    -o-transition-duration: 2s, 2s, 4s, 2s;
    -moz-transition-property: background-color, height, width, visibility;
    /*Firefox*/
    
    -moz-transition-duration: 2s, 2s, 4s, 2s;
    transition-delay: 0s, 0s, 2s, 0s;
}
#primo:hover {
    background-color: red;
    height: 100%;
    width: 1227px;
    visibility: visible;
}

Il box "primo" ( figlio di box-cd) compare al passaggio del mouse su box-cd e questo mi va bene. Il problema riguarda la larghezza, perch� vorrei che "primo" occupasse tutta la pagina in orizzontale, ma impostando anche una width:100% questa ovviamente si riferisce al box contenitore che occupa solo il 32%.
Se primo non lo rendessi figlio di box-cd, non so come applicare la regola che al passaggio del mouse su box-cd deve verificarsi l'effetto su "primo", regola che al momento � attiva con il selettore figlio ( >) ovvero #box-cd:hover > #primo, ho provato anche il selettore fratello #box-cd:hover + #primo e ovviamento spostando i div uno di seguito all'altro nell'html ma non funge.
Sapete aiutarmi?