Alignement Hover et image

Bonjour,
j'ai un problème lors du survol du texte, j'ai un écart entre l'image et la couleur du hover qui survole le texte (pas sur d’être très compréhensible..) il me semblait pouvoir régler ça avec un vertical align : top mais je n'y arrive pas, quelqu'un aurait-il la solution ??

HTML

 

<article class="container">

                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                    <div id="demoA">
                        <a href="img/projets/onf/01.jpg" rel="Title photoset 2"><img src="img/Entete/01.jpg"></a>
                        <a href="img/projets/onf/02.png"></a>
                        <a href="img/projets/onf/03.jpg"></a>
                        <a href="img/projets/onf/04.jpg"></a>
                        
                       

                        <div class="rollopaque2 souligne">
                            <h2>ONF IGN</h2>
                            <p>Exposition Stratégique Forêt!, Hôtel de ville,Paris
                            </p>
                        </div>
                    </div>
                </div>

CSS

.rollopaque2:hover p{
    opacity: 0.5;
    filter:alpha(opacity=50);
    border:0;
}

.rollopaque2:hover {
    background:#ca292e;
}

J'ai réussi à trouver en fait j'avais un border qui je pense était géré par Bootstrap, Merci quand même