Hovereffekt positionieren

[Fishmasta]

Tachschen,
ich habe ein kleines Problem einen Hover-Effekt zu konfigurieren.

So sieht es zur Zeit aus: KLICK

Ich hätte den Effekt aber gerne so, dass nur die Bilder und nicht der Rahmen überlagert werden.
Außerden soll die Schrift genau in die Mitte (horizontal und vertikal zentriert).
Wie bekomme ich die 2 Sachen hin?

Bei einer bestimmten Fenstergröße sieht das ganze so aus: KLICK
Wenn die Bilder nicht alle in eine Reihe passen, hätte ich es gerne so, dass der Adler möglichst weit links erscheint.
Was muss ich dafür tun?

Quelltext der .php:

<div class="main_menue">
    <img src="bilder/main_menue/schauspieler.jpg" width="266" height="400" />
    <div class="hover">
        <p>&nbsp;Schauspieler&nbsp;</p>
    </div>
</div>

<div class="main_menue">
    <img src="bilder/main_menue/locations.jpg" width="266" height="195" />
    <div class="hover">
        <p>&nbsp;Locations&nbsp;</p>
    </div>
</div>

<div class="main_menue">
    <img src="bilder/main_menue/autos.jpg" width="266" height="194" />
    <div class="hover">
        <p>&nbsp;Autos&nbsp;</p>
    </div>
</div>

<div class="main_menue">
    <img src="bilder/main_menue/tiere.jpg" width="542" height="210">
    <div class="hover">
        <p>&nbsp;Tiere&nbsp;</p>
    </div>
</div>

Quelltext der .css:

@charset "utf-8";
/* CSS Document */

.main_menue {
    position:relative;
    display:inline-block;
    margin-left:4px;
    float:left;
}

.main_menue:hover .hover {
    opacity:1;
}

.main_menue img {
    border:solid 3px #FFF;
}

.hover {
    opacity:0;
    transition:opacity 0.25s linear;        
    position:absolute;
    background-color:rgba(0,0,0,0.7);
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

.hover p {
    font-family:Arial;
    font-size:12pt;
    font-weight:bold;
    text-align:center;
    color:#fff;
}

DANKE FÜR DIE HILFE!!!

 

[djheke]

Warum definierst du einen weißen 3px Rahmen auf weißem Hintergrund? Wenn du den nicht haben willst, dann notiere einfach
k e i n e n Rahmen.
Übrigens gehört eine Navigation in einer Liste <ul>.

 

[Fishmasta]

Ich habe nur den relevanten Code hochgeladen.
Normalerweise ist der Hintergrund dunkel.

Wenn ich die Definitionen so in eine ul übertrage, ändert das aber auch nichts an der ungewünschten Darstellung.

 

[djheke]

Dann versuch's mal so.

:hover img {
 border:3px solid #fff;
}

Vielleicht klappt's.