Farbumschlag bei "hover" außerhalb eines Bildes

Hallo alle zusammen,

ich bitte um Hilfestellung bei nachfolgend beschriebener Aufgabenstellung.
Wenn der Mauszeiger sich über dem Bild befindet soll der schwarze Balken unterhalb des Bildes rot erleuchten (siehe Anhang). Danke im Voraus.

Zugehöriger html-Code:

<div class="box-gallery">
<article class="item">
<a class="fancybox-thumbs" data-fancybox-group="thumb-6" href="images/foto_1.jpg">
<img id="images_shadow" src="images/pic.jpg" alt="" title="Zur Galerie"/></a>
<header>Bilder</header>
</article>
</div>

Zugehöriger CSS-Code:

.item header
{
background:#000;
-moz-box-shadow: 2px 2px 5px #707070;
-webkit-box-shadow: 2px 2px 5px #707070;
box-shadow:2px 2px 5px #707070;
margin-top:-17px;
padding: 1em 0 1em 0;
font-size: 0.8em;
 width: 100%;
}

danke schön! jetzt funktioniert alles. So einfach war es. Bin halt ein Anfänger.

Momentan lässt sich das Bild nur im Feld des Fotos öffnen. Lässt es sich auch noch so einstellen, dass zusätzlich auch durch Betätigung des schwarzen Balkens ebenfalls das Foto öffnet?
Mit anderen Worten: Nicht nur das Feld über dem Bild, sondernd das gesamte Feld (inkl. Balken) soll zum öffnen des Bildes aktiv sein. Danke im Voraus

Zitat von cottton

Dann setze den header mit in den Link.

Grundsätzlich funktioniert das so, aber das Wort "Bilder" wird nicht mehr angezeigt und der Balken wird schmäler. Hast Du eine Idee, wie man das beheben kann? Danke

hier alles, was aus dem CSS dazugehört:

.box-gallery {    margin: 0px auto;    float: left;    width: 14.5%;    margin-right: 2%;}
/* Item */
.item{    box-shadow: 0 0.05em 0.15em 0 rgba(0,0,0,0.05);    margin-bottom: 40px;}
.item_2{    box-shadow: 0 0.05em 0.15em 0 rgba(0,0,0,0.05);    /*margin-bottom: 0px;*/    margin-left: 40px;}
.item header{    background: #000;    -moz-box-shadow: 2px 2px 5px #707070;    -webkit-box-shadow: 2px 2px 5px  #707070;    box-shadow: 2px 2px 5px #707070;    /*margin: 0;*/    margin-top: -17px;    padding: 1em 0 1em 0;    font-size: 0.8em;    width: 100%;}
.item:hover header{    background-color: #ff0000;			
}
.item:active header{    background-color: #008800;}




.item a {    font-size: 0px;}
.item header h3{    font-size: 1em;}
.item img {    width: 100%;}

habe den Fehler gefunden. Es lag am CSS:

.item a {    font-size: 0px;}

Schriftgröße 0px ist natürlich etwas schlecht sichtbar :)))