Hi,
Ich habe eine Frage.
Und zwar habe ich ein Bild per CSS in meine html-Seite eingebunden, ganz normal eben.
Nun möchte ich aber, dass das Bild in Großansicht angezeigt wird wen man mit der Maus über das eingebundene Bild fährt.
Ich hab gelesen, dass es mit mouseover möglich ist, habe aber leider nicht genau herausgefunden wie es funktioniert…
Hier der html-Code von dem eingebundenen Bild:
Hier der CSS-Code von dem eingebundenen Bild:
#tlf {
background-image: url(link);
background-repeat: no-repeat;
position: absolute;
margin-top: 1171px;
margin-left: 408px;
width: 103px;
height: 100px;
}
Über Tipps wäre ich sehr dankbar!
Lg eret12
mouseover ist meines Wissens eine Funktion aus JavaScript. Da wirst du mit HTML und CSS allein schlechte Karten haben.
#tlf:hover {
hier die css Settings fürs hover
}
:hover für mousehover verwenden.
Hi,
vielen Dank, das bringt mich schon ein ganzes Stück weiter...
aber es geht noch nicht so ganz wie es sollte
CSS:
#tlf {
background-image: url(link);
background-repeat: no-repeat;
position: absolute;
margin-top: 1171px;
margin-left: 212px;
width: 103px;
height: 100px;
}
#tlf:hover {
background-image: url(link);
background-repeat: no-repeat;
position:absolute;
margin-top: 1171px;
margin-left: 212px;
width: 103px;
height: 100px;
}
Wenn ich jetzt mit der Maus über das Bild fahre verschwindet es einfach
Muss ich die beide iwi kombinieren?
Muss ich tlf:hover in der html auch mit einem div aufrufen?
Lg eret12
Hallo eret12,
habe dir hier eine Lösung mit CSS3 gebaut:
[Link:
Registrierung erforderlich]
Bei den CSS-Deklarationen für dein :hover musst du nur Werte angeben die sich beim mouseover verändern sollen.
#tlf {
background-image: url(link);
background-repeat: no-repeat;
width: 100px;
height: 100px;
background-size: 100px 100px;
}
#tlf:hover {
background-size: 400px 400px;
width: 400px;
height: 400px;
}
Gruß,
dee
Hi,
die Antwort von dee hat mich sehr weiter gebracht!
Das Problem ist nun, dass andere Texte und Bilder auf der Homepage im Vordergrund sind und mein vergrößertes Bild dahinter liegt...
Wie bekomme ich es hin, dass das Vergrößerte Bild immer im Vordergrund ist?
Zudem vergrößert sich das Bild immer nach unten hin...
kann man es auch so machen, dass es sich nach oben vergrößert?
Lg eret12
Versuch´s mal mit Z-Index
Dein Bild was vorne zusehen sein soll gibst Du den Wert 2, allen anderen Grafiken 1
Wenn Du Deinem Bild ein feste Größe geben würdest, sollte es sich auch nicht verschieben !
Gruß Plat
Alternativ kannst du's auch mal damit versuchen:
#tlf {
background-image: url(link);
background-repeat: no-repeat;
width: 100px;
height: 100px;
background-size: 100px 100px;
}
#tlf:hover {
zoom: 2; //Beliebigen Multiplikator einfügen
}
Hi,
das mit z-index funktioniert
Danke!
aber das Bild weitet sich immer nach unten aus...
es hat denselben "Ursprung" wie das kleine Bild...
Hier der CSS Code:
#tlf {
background-image: url(link);
background-repeat: no-repeat;
position: absolute;
margin-top: 887px;
margin-left: 212px;
width: 103px;
height: 100px;
background-size: 103px 100px;
z-index: 1;
}
#tlf:hover {
background-image: url(link);
background-size: 412px 400px;
width: 412px;
height: 400px;
border-style: solid;
border-width: 2px;
border-color: #ED1C24;
z-index: 2;
}
Es muss doch möglich sein, dass das Bild sich einfach nach oben hin ausrichtet...
Lg eret12