Propriété :hover en CSS

Salut c'est encore moi avec mes :active et mes :hover décidément je galère...

Alors j'ai une image qui, lorsque je passe ma souris, s’agrandit de quelque pixel avec en dessous une bannière de description qui s'agrandit également, dans cette bannière j'ai:(Comment obtenir le pack office 2010)

Puisque mon texte débordait sur le bouton 'voir l'article' qui se trouve juste a droite de ma description,
J'ai mis une largeur fixe à <p> qui nous permet de voir que: "Comment obtenir le pack office" il nous manque 2010.

L'idée serait donc que lorsque je passe ma souris sur l'image,qu'elle s’agrandisse et agrandisse également la zone de texte,ceux qui me permettrai de voir apparaitre la suite du texte (2010)

Merci de votre aide Dadynio.

Voila mon code

<article>
   <div id="banniere_image">
                <div id="banniere_description">
                    <p>Tutoriels Pack Office 2010 "Comment obtenir le pack office 2010"</p>
                    <a href="#" class="bouton_rouge">Voir l'article </a>
                </div>
            </div>
</article>

#content article{
margin:50px 50px 20px 320px;
height: 300px;
width: 600px;
}
#content h1{
    margin-left: 30px;
    font-family: monospace;
}
#banniere_description p{  
    width: 70%; 
    height: 15px;
    overflow: hidden;
    margin: 0 0 0 20px;
}
#banniere_description
{   
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
    background-color: rgba(24,24,24,0.8);/**/
    color: white;
    font-size: 0.8em;
}
.bouton_rouge
{
    display: inline-block;
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}
.bouton_rouge img{
    border: 0;
}
#banniere_image
{
    height: 200px;
    width: 400px;
    border-radius: 5px;
    background: url('audacity.jpg') no-repeat;
    background-size: 400px 200px;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;/*ombre*/
}
#banniere_image:hover{
    height: 280px;
    width: 480px;
    background-size: 480px 280px;
    margin-left: -15px;
}