Mouseover image
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
effekt
einzelheit
element
funktioniert url
http
interessieren
opus
paar
safari
schauen
sichtbarkeit
solution
tag
text
tip
url
vordergrund
vorgabe
workshop
-
Guten Tag,
ich versuche derzeit auf meiner neuen Homepage ein Mouseover einzubauen.
Durch das Mouseover soll ein Bild in den Vordergrund gesetzt werden und vergrößert werden.
Ich habe nun schon einige möglichkeiten durchprobiert doch leider klappt keine dieser möglichkeiten.
Außerdem, soll beim Mouseover ein Text angezeigt werden (in einer extra Box) also nicht
<p><img src="Beispielbild.png" alt="Beispiel"></p>
Ich hoffe auf einen Guten Tipp.
Gruß Kovel
Beitrag zuletzt geändert: 31.10.2013 16:31:59 von exotic-mgc -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also ... ich habe da mal was ausprobiert, nach Vorgaben wie z.B. diese hier => http://www.webmasters-solution.de/workshops/css/info-text.html ... da habe ich 's beim <span> Element halt mit Klassenzuweisung probiert ... und es funktioniert => http://ecollage.lima-city.de/help/test.html (mit Transparenz)
das selbe dann nochmal nach dieser Vorgabe => http://brauchbar.de/artikel/css/der-mouseover-effekt-mit-css ... das habe ich in der ersteren Variante verbaut => http://ecollage.lima-city.de/help/test2.html
FF, Chrome, IE funzt Beides ... Opera, Safari weiß ich nicht !
Das Gute daran ist, es kommt Beides ohne JS aus ...
naja, mußt mal schauen ... und Deinen Wünschen anpassen (bedien Dich am Quelltext) ;)
Beitrag zuletzt geändert: 1.11.2013 10:04:19 von ecollage -
grundsätzlich lässt sich so etwas mit der Pseudoklasse :hover machen.
Das Element selbst setzt Du auf unsichtbar und erst bei überfahren wird dann die Sichtbarkeit auf true gesetzt
Falls Dich Einzelheiten interessieren, sag mir Bescheid, ich schicke Dir dann ein paar Beispielzeilen...
Beitrag zuletzt geändert: 4.11.2013 20:00:10 von wsgraphics -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage