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

Hover Effekte - Erst Bild dann Text mit einfarbigen Hintergrund

M

Mafie0208

Neues Mitglied
Hey CSS-Cracks,

wahrscheinlich kostet euch meine Frage nur ein müdes Lächeln aber ich bin Einsteiger und muss noch lernen ;)

Ich will auf meiner eigenen Seite gerne Bilder in Div-Containern darstelen lassen, die beim rüberfahren mit der Maus (nicht anklicken) sich in einen Text mit Hintergrundfarbe ändern. Die größe des Feldes wird von dem Container bestimmt und darf genau so mit der Hintergrundfarbe ausgefüllt werden wie es das Bild zuvor tat. Ich hatte mir so etwas dabei vorgestellt: Jack Hughes Illustration (Hoffe, das ist legal, dass ich hier fremde Links poste, um das Problem zu erklären)
Könnt ihr mir da weiterhelfen wo ich den Text der später zu sehen sein soll hinschreibe, ohne dass man ihn schon im voraus sieht und wie man da so einen schönen weichen Übergang hinbekommt?

Beste Grüße

Mafie
 
Schau dir doch mal den Quellcode deiner Beispielseite an. Dort kommt evtl. noch der Einsatz von JavaScript erschwerend hinzu, aber das Aus- und Einblenden wird über CSS realisiert. Dazu gibt es in einem umgebenden Element (dort ein <a>, ich würde in dem Fall eher zu <ul> > <li> oder <div> raten) in dem wiederum 2 Abschnitte sind: einer wird sofort beim Laden der Seite angezeigt, der andere per "opacity:0" ausgeblendet - und beide absolut innerhalb des umgebenden positioniert. Dann muss man "nur" noch die hover-Eigenschaften bearbeiten:

Code: 
div:hover img { opacity: 0; }
div:hover p { opacity: 1; }

wodurch dann das eine Element ausgeblendet, das andere eingeblendet wird.

Den weichen Übergang wie in deinem Beispiel wirst Du aber nur mit CSS-Transitions oder JavaScript hinbekommen. Bei meinem Beispiel findet der Wechsel sofort ohne Übergang statt.
 
Also der Container heißt "box2" und in dem hab ich nun ein Bild und den Text... aber er wechselt nur zu einer schwarzen Box ohne mir die Schrift anzuzeigen. Hier mal der Code...

#box2 {
background: #000;
}

#box2 p {
opacity: 0;
font-color: #FFFFFF;
}

#box2 img {
-moz-transition: opacity .3s linear;
-webkit-transition: opacity .3s linear;
transition: opacity .3s linear;
}

#box2 img:hover {
opacity: 0; }


#box2 p:hover {
opacity: 1; }



HTML-Code:

<div id="box2">
<img src="Bild.jpg" width="100%" height="100%">
<p> Das ist der Text! </p>
</div>
 
Ich hab mal nach geschaut, auf der Seite wird der neue CSS3 Effekt transition: ease out verwendet.
(Auch der Text ist ein Bild)


Und so gehts:

1: Nimm 2 Bilder mit der gleichen Höhe und Breite und platziere sie mit "position: absolute" und left, top, bottom etc. genau übereinander.
2. Das erste liegt "unten" und bekommt "class=unten".
3. Das zweite liegt "oben" und ist sofort sichtbar und bekommt "class="oben". Das Zweite habe ich noch in einen Link gepackt, damit man dann klicken kann.
4. Beim Hovern bekommt nun das obere Bild "opacity: 0" und verschwindet mit den Einstellungen von transition.

Code: 
<!DOCTYPE html>
<html>
<head>
    <title>Titel</title>
<meta charset="utf-8">
<style type="text/css">

#box img {
  position:absolute;
  left:0;
}



#box img.oben:hover {
   opacity: 0;
   -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}



</style>

</head>
<body>
 <div id="box">
<img class ="unten" src="bild1.jpg" >
<a href="#"><img class ="oben" src="bild2.jpg" ></a>
 </div>
</body>
</html>


PS. Damit Opacity auch im IE und älteren Versionen vom IE funktioniert gibt's noch folgende Schreibweisen:

Code: 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
filter:alpha(opacity=0);
 
Zuletzt bearbeitet:
Hej Zejo, super das funktioniert im Prinzip. Das einzige was ich nicht so ganz verstehe ist warum er mir jetzt die Bilder über meinen Containerrand schießt wenn die Position absolute ist und ich width & height jeweils uf 100% gestellt habe. Der Container hat eine Weite von 54% und Höhe 15% und theoretisch müsste er dann doch das Bild daran anpassen?! Macht er aber mit dem absolute Befehl nicht mehr... gibt es dafür auch noch eine Lösung?
 
Hmm, probiere es mal so:

Schreibe beim Div-Container "position: relative"

Dann kannst du in dem Div Conatiner Objekte mit "position: absolute" ausrichten.
 
Echt cool wie ihr mir geholfen habt. Dickes Dankeschön!
Man kann übrigens auch das zweite Bild rausnehmen und stattdessen ein p-Element einsetzen, sodass beim hover-Effekt das Bild verschwindet und die Box mit dem eigentlichen Text sichtbar wird.

Also noch einmal Danke und einen entspannten Samstag wünsche ich euch.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben