Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag14.02.2015 um 20:29 (UTC)    
Titel: Mouseover mit einen weichen Übergang

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:

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:

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

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:   


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