Textfeld beim überfahren des Bildes mit der Maus

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

hier ist mein Quellcode:

[CODE]

.container {
position:relative;
}
.container .textbox {
width:684px;
height:513px;
position:absolute;
top:0;
left:0;
-webkit-transform: scale(0);
transform: scale(0);
border-radius:5px;
background-color: rgba(0,0,0,0.5);
-webkit-box-shadow:
0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
}
.container:hover .textbox {
-webkit-transform: scale(1); transform: scale(1);
}
.text {
padding-top: 50px;
padding-left: 100px;
color:white;
}
.textbox {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

[/CODE]

[CODE]


TEXT

[/CODE]

Mein Problem ist, dass die Textbox nicht nur angezeigt wird, wenn man mit der Maus auf dem Bild ist, sondern auch wenn man rechts daneben ist. Ich möchte aber, das der Effekt nur beim „überfahren“ des Bildes mit der Maus kommt.

Danke schonmal im Voraus,
speedy_mh

P.S: Ich bin erst vor kurzem in CSS eingestiegen und habe (wie man wahrscheinlich sieht :)) noch nicht sehr viel Erfahrung.

2

Ich bin auch auf der Suche nach einer Lösung des Problemes wie man hier sehen kann
https://www.html.de/threads/navbar-wie-bei-datafox.53961/

40 Views und bisher hat keiner nen Plan ^^ ich versuch mal deine lösung zu verstehen… vllt könma des zu zweit

3

Dann sollte der Effekt auch dem Bild zugeordnet werden und nicht dem container.

Gruss
Elroy

4

@Elroy: das heißt ich muss dem bild eine id zuordnen, die ich dann durch den effekt definiere, oder wie macht man sowas? :rolleyes:

5

@Dane315: ich habe versucht um das bild einen div-container zu erzeugen, bei dem bei „hover“ ein textfeld eingeblendet wird

6

Du möchtest das die Terxtbox nur erscheint wenn du mit dem Mauszeiger auf dem Bild bist?
Dann musst du auch dem Bild den hover geben und nicht der div Box.

Das hast du ja auch geschafft. Sobald du auf den div Conatainer gehst erscheint die Textbox.

Gruss
Elroy

7

Denk daran, dass ein DIV-Element ein Blockelement ist und sich über die gesamte Breite erstreckt. Du musst deinem Container eine feste Breite geben oder ein float:left; geben.

8

Mal eine Frage wie verändere ich die Farbe der Textbos von durchsichtig zu undurchsichtig grau?

Und bei Tablets funktioniert diese Sache ja nicht da keine Maus da ist oder?

9

Indem du der Textbox eine graue Hintergrundfarbe ohne Transparenz gibst.

Gruss
Elroy