HTML Bild richtig einstellen

Hallo liebe Community,

kommen wir mal zu meinem Problem.
Ich habe von einem Freund ein Template für eine Homepage bekommen und ich düftel da einfach bisschen rum aus Spaß.
Habe aber nun ein Problem mit einer Bildvorschau.

Ich denke man sieht das Problem das Bild ist größer wie dieses schwarze Feld wenn man mit der Maus drüber geht.
Und meine Frage ist jetzt wie kann ich dieses schwarze Bild größer machen damit es über das ganze Bild geht?

So sieht das ganze aus.

<li class="span3 gallery-item" data-id="id-1" data-type="illustration">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/test.jpg" class="item-zoom-link lightbox" title="test" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="img/gallery/test.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">test</a>test</span>
</li>

Danke für jede Hilfe!

#edit
Habe herausgefunden das man mit <span class="gallery-hover-4col hidden-phone hidden-tablet"> die ganze Funktion rausnehmen kann. Ist aber nich nach meinem ermessen möchte das gerne an das Bild anpassen

http://www.feed-flash.com/probeversion/ Bitte

Kann das sein das ich das nur über die CSS Datei einstellen kann?

Oh , habe an der Seite alles möglich geändert um den Fehler zu finden. Dachte da kommt nichts mehr kannst jetzt wieder draufgehen, habe extra ein Foto hochgeladen damit man es sieht.
Wenn es in der CSS Datei drin steht wo kann ich das Finden? Schicke dir einfach mal ein Ausschnitt von der CSS Datei.

/*** Gallery ***/.gallery-hover-6col {width:140px; height:114px;}
.gallery-hover-4col {width:220px; height:180px;}
.gallery-hover-3col {width:300px; height:243px;}
.gallery-hover-4col-cir {width:220px; height:220px;}
.gallery-hover-4col-cir .gallery-icons {top: 42%; left:29%;}


li.span4 .project-details {
    -o-text-overflow: ellipsis;
    text-overflow:    ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width: 280px;
    }
li.span3 .project-details {
    -o-text-overflow: ellipsis;
    text-overflow:    ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width: 200px;
    }
li.span2 .project-details {
    -o-text-overflow: ellipsis;
    text-overflow:    ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width: 120px;     }

Bin mir aber nicht sicher ob das dass richtige Abteil ist

Ah ok danke, noch eine andere Frage wenn ich an der Homepage arbeite und das dann in FileZilla hochladen werden die Datein zwar im FileZilla übernommen, sprich überschrieben aber im Browser sieht man keinerlei Veränderung erst nach dem ich den Ordner im filezilla umgenannt habe wird dies sichtbar.

edit habe noch eine möglichkeit gefunden.

<span class="gallery-hover-4col hidden-phone hidden-tablet">

Wenn ich dort statt 4col 3col eingebe wird dies vergrößert kann man auch irgendwo die perfekten maßen dafür sehen.
Du hast ja die Maßen für 4col schon geschrieben was ist aber mit den anderen wo kann ich die finden?

Ok danke und was ist damit "Wenn ich dort statt 4col 3col eingebe wird dies vergrößert kann man auch irgendwo die perfekten maßen dafür sehen.
Du hast ja die Maßen für 4col schon geschrieben was ist aber mit den anderen wo kann ich die finden?" sorry wenn ich deine Zeit so viel in Anspruch nehme ..

ah alles klar danke dir