Suche im Forum:
Suchen


Autor Nachricht
Beitrag14.02.2015 um 20:29 (UTC)    
Titel: Mouseover mit einen weichen Übergang
Antworten mit Zitat
Hi
ich würde gerne wissen wie ich einen Mousover mit einen weichen Übergang hinbekomme.
auf eine schnelle antwort würde ich mich freuen Smile
danke
↑
Beitrag15.02.2015 um 02:35 (UTC)    
Titel:
Antworten mit Zitat
Arrow eventuell hilft dir diese Beschreibung: http://www.homepage-baukasten.de/forum/viewtopic.php?t=141589&highlight=mouseover
______________
mfG design-globe
↑
Beitrag15.02.2015 um 21:32 (UTC)    
Titel:
Antworten mit Zitat
Erstmal danke dazu.
Nur möchte ich das der Übergang von einem zum anderen Bild weich verläuft.
Bei den Beispielen ist es ein schnelles Übergang.
↑
Beitrag21.02.2015 um 12:44 (UTC)    
Titel: weicher Bilderwechsel / weicher Übergang Hover
Antworten mit Zitat
Hallo,

Den weichen Übergang können wir z.B. mit transition erreichen.
Arbeitest Du mit :hover im CSS Code ? Dann können wir nur Hintergrundfarben via transition weich wechseln lassen.
Mit Bildern die als Hintergrundbilder verwendet werden, funktioniert das leider nicht

Wir gehen hier anders vor.
Zwei Bilder liegen absolut positioniert in einem relativ positionierten DIV.
Bei Mauskontakt wird das obere Bild durch opacity (= transparenz) ausgeblendet.
Mit 1 Sekunde (1s) für den Übergang entsteht das weiche Einblenden des unten liegenden Bilds

HTML-Code für den Seiteninhalt :
Zitat:

<div class="bildwechsel">
<img src="Grafikadresse 1" />
<img class="oben" src="Grafikadresse 2" />
</div>


Der CSS Code für das Feld "Eigener <head> Inhalt"
- auf "Extras" gehen
- das Extra "Eigener <head> - Inhalt" aktivieren
- den CSS Code dort einfügen
Zitat:

<style tpe="text/css">
<!--

.bildwechsel {
position: relative;
width: 600px;
height: 250px;
}

.bildwechsel img.oben:hover { opacity: 0; }

.bildwechsel img {
position: absolute;
top: 0; left: 0;
opacity: 1;
transition: opacity 1s;
}


-->
</style>


Die Größe die hier das DIV bekommen hat, kannst Du bei width: und height anpassen.
Die beiden Bilder müssen in der Gleichen Größe vorhanden sein.


Gruß Wolle
______________


Zuletzt bearbeitet von clean-test am 26.02.2015, 18:06, insgesamt 2-mal bearbeitet
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de

© 2024 webme GmbH, Deutschland. Alle Rechte vorbehalten.