Bilder überlappen, zweites Bild zentrieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

16:01, 25.4.2014

Hallo,
ich möchte folgendes erreichen:
Ich habe zwei Bilder: Bild1(300x300px) und Bild2 (50x50px).
Bild1 soll normal angezeigt werden, Bild2 nicht.
Wenn der Benutzer auf Bild1 den Mauszeiger steuert, soll Bild1 "durchsichtig" werden und Bild2 in der Mitte von Bild1 angezeigt werden. Zudem soll unter Bild2 ein Text angezeigt werden, den ich per PHP einstellen kann.

Hier mein Ansatz:

<html>
<head>
<style>
div#bild {
    width: 300px;
    height: 300px;
}
div#bild div {
    width: 300px;
    height: 300px;
}
div#bild1 {
    opacity: 1.0;
    background-image: url(Bild1.jpg);
    background-repeat: no-repeat;
}
div#bild:hover div#bild1 {
    opacity: 0.5;
    background-image: url(Bild1.jpg);
    background-repeat: no-repeat;
    z-index: 1;
    position: absolute;
}
div#bild:hover div#bild2 {
    opacity: 1.0;
    background-image: url(Bild2.png);
    background-repeat: no-repeat;
    z-index: 2;
    position: absolute;
}
div#bild2:hover div#text:after {
    color: #FF0000;
    display: block;
    z-index: 2;
    content: "Text";
}

</style>
</head>
<body>
<div id="bild">
<div id="bild1"></div>
<div id="bild2"><br /><div id="text"></div></div>

</div>
</body>
</html>

1. Wie bekomme ich Bild2 in die horizonate sowie vertikale Mitte von Bild1?
Bis jetzt habe ich einen statischen Text "Text" eingetragen, der aber nicht unter der Krone angezeigt wird.
2. Wie bekomme ich den Text unter Bild2?
3. Wie kann ich per PHP steuern, welcher Text angezeigt wird?

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
sonok

Moderator

sonok hat kostenlosen Webspace.

18:01, 25.4.2014
1)
Mittels position und margin (kann auch negative Werte haben!).

2)
Je nach Geschmack - da sind die Wege wirklich unzählig und an für sich ist das 08-15 CSS-Positionierung. Am besten einfach ein bissl in der selfhtml rumgucken (oder andere einschlägige Seiten nutzen).

3)
Bildernamen und die Texte in einer Datenbank oder xml ablegen, Dann beim Seitenladen die Bildernamen mit den Texten aus der Datenbank holen und in Variablen/Array speichern. Dann im html die Bildverknüpfungen mit den dazugehörigen Texten entsprechend der Variable / des Arrayortes auslesen und einfügen.

Beitrag zuletzt geändert: 25.4.2014 18:07:48 von sonok
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city