• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild Text einblenden.

ChechenHD

Mitglied
Hallo Leute,

Ich wollte Fragen wie ich es hin bekomme das im bild oben ein grauer Balken Transparent angezeigt wird wo der Bild Name dann Steht. Es soll halt auf dem Bild.

Was ein Highlight wäre wenn der Text dann langsam von weis in blau über geht wenn man mit der Maus drüber ist.

Bin ein blutiger Anfänger. Hoffe auf Ausführliche und verständliche Erklärung ^^

Danke im voraus!
 
Werbung:
Also dazu würde ich das Bild mittles background-image:url() als Hintergrund eines DIV Containers zuweisen und innerhalb des Div einen Span für den Text und diesen mittels background-color und opacity den style zuweisen.

Hier ein Beispiel:
Code:
<html>
    <head>
        <title>Versuch</title>
        <style type="text/css">
            .bild {
                background-image:url(/verzeichnis/bild.jpg);
                background-color: red;
                width: 200px;
                height: 150px;
            }
            .bild span {
                background-color: gray;
                opacity: 0.75;
            }
        </style>
    </head>
    <body>
        <div class="bild">
            <span>TEXT</span>
        </div>
    </body>
</html>
 
Hallo.

Dann möchte ich den Code von bodo92 etwas verbessern. Ich hoffe das ist erlaubt.

Code:
<!DOCTYPE HTML>
<html>
    <head>
        <title>Versuch</title>
        <style type="text/css">
            .bild {
                background-image:url(/verzeichnis/bild.jpg);
                background-color: red;
                width: 200px;
                height: 150px;
            }
            .bild p {
                background-color: rgba(136, 136, 136, 0.75);
                transition: color 2s ease;
                color: rgba(255, 255, 255, 1);
                text-align: center;
            }
            .bild p:hover {
                color: rgba(0, 0, 255, 1);
            }

        </style>
    </head>
    <body>
        <div class="bild">
            <p>TEXT</p>
        </div>
    </body>
</html>

Auf Opacity habe ich verzichtet da sich das auf die Kindelemente vererbt, ich habe die Transparenz statt dessen mit RGBa realisiert
Warum für den Text ein <span> verwendet wurde verstehe ich nicht ganz. Den semantischen Sinn dahinter müsste mir dann bodo92 noch mal erklären.
Der langsame Übergang von Weiss zu Blau wurde mit Transition gemacht, das funktioniert allerdings nur in modernen Browsern.

Gruss
Elroy
 
Zuletzt bearbeitet:
Werbung:
Aber klar ist das erlaubt, das mit rgba war mir nicht bekannt :)

beim class bild habe ich noch background-color: red; angegeben das war nur zum test das kann natürlich raus ;)
 
Zurück
Oben