Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Z-Index wechseln mit transition
#1
Hier bei TAPE TECHNIK
https://www.afripix.de/NewStyle/studio-f...dbroel.php

Wenn man mit der Maus über die blonden Haare geht, würde ich gerne SANFT überblenden.
.img1:hover {
z-index: 9!important;
transition: all 0.3s;
}
So gehts nicht
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

Werner hat hier 2 Seiten mit allen möglichen Hover-Effekten - vielleicht hilft das ja schon:

https://werner-zenk.de/css/bilder_mit_hover-effekt.php

Du musst dem Transition schon auch noch sagen was sich denn dann ändern soll und nicht nur die Zeit:

https://wiki.selfhtml.org/wiki/CSS/Eigen...transition
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
ich glaube gerade, dass das mit transition nicht geht, weil es zwischen Z-Index=0 und Z-Index=1 keine Zwischenschritte gibt.
Datt muss dann anders
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
... ich weiß nicht wozu Du den "z-index" da brauchen könntest :confused:

Beispiel (eventuell Seite neu laden) - Maus über das Mohn-Bild:

http://www.mobirise-tutorials.com/Testse...l#Position

Code:
.fade {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.fade:hover {
  opacity: 0.8;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Ein Bild liegt hinder dem anderen.
Bei Mouseover soll das hintere Bild nach vorne.

Mit Opacity geht das halt nur mit Krücken.
Dann muss ich eine unsichtbare Kopie des hinteren Bildes mit hohem Z-Index, was genau über dem hinteren Bild liegt, bei Mouseover sichtbar machen.

Du hast Dir schon das Beispiel angeschaut?
Auf Deiner Seite finde ich da nichts ähnliches.

Natürlich gibt es da javascript-Lösungen. Der Z-Index wäre halt eine EINFACHE Lösung.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
... ich habe heute kein Zeit mehr dafür, das sollte doch aber ganz ähnlich wie hier gehen.

http://css3.bradshawenterprises.com/cfimg/

da änderst Du dann einfach die Deckkraft (opacity) zwischen den beiden Bildern.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Hier ist noch eine JavaScript-Lösung:

https://bavotasan.com/2009/creating-a-jq...de-effect/

... dich ich mal hier in NOF eingebaut hatte (das untere Bild mit Eichhörnchen):

http://www.tommyherrmanndesign.com/nof/m...index.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Ich habe jetzt mal diesen Bildwechsel mit reiner CSS bei Hover ausprobiert. Das geht eigentlich sehr schön, nur hat die id="cf" eine feste Höhe (hier 350px) und das kommt mir noch etwas "ungeschickt" vor, ich habe es vorerst mit Media-Queries gelöst.

... falls jemand dazu eine Idee hat, wäre ich dankbar.

Ohne diese feste Höhe fehlt dem Container/Bild die Höhe.

... bitte etwas hoch scrollen um das Bild richtig zu sehen oder meine vertikale Navigation am Desktop oben am Button in der Navi ausschalten:

http://www.mobirise-tutorials.com/Testse...ildwechsel

Code:
<div id="cf">
  <img class="bottom" src="http://www.mobirise-tutorials.com/Testseiten/Testseite3/assets/images/Bild10.jpg">
  <img class="top" src="http://www.mobirise-tutorials.com/Testseiten/Testseite3/assets/images/Bild20.jpg">
</div>

Im Moment habe ich das Problem dieser Höhe nur über Media-Queries gelöst:

Code:
#cf {
  position: relative;
  width: 500px;
  max-width: 100%;
  height: 350px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  #cf {
    height: 300px;
  }
}
@media (max-width: 576px) {
  #cf {
    height: 250px;
  }
}
#cf img {
  position: absolute;
  left: 0;
  height: auto;
  width: 500px;
  max-width: 100%;
  cursor: pointer;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
  opacity: 0;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Damit verlassen wir aber eindeutig den Bereich des "mal eben schnell und einfach" den Effekt herstellen.
Hier also nun einfach nur mit HTML und CSS, aber eben die komplizierte Methode mit überlagernden Bildern mit diversen Z-Indexen. Unten der letzte Block auf der Seite "our values". Ist jetzt irgendwie genau andersrum, aber das ist erstmal Wurscht.

https://www.afripix.de/NewStyle/page13.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
... hmm - zeige mal Deine CSS.

Was soll da jetzt einfacher sein? Am Handy geht Deins gerade gar nicht - da fehlt die Höhe komplett.


.jpg  Screenshot_20200621-175456_Samsung Internet.jpg (Größe: 429,16 KB / Downloads: 8)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Keiner versteht mich.....
Ich habs doch mal nur einfach eben eingetippt und geht auch nur ansatzweise am PC.
Aber rein vom Prinzip her ist das alles Käse!!!

Die ganzen Mobi-Standard-Elemente mit überlagernden Bildern klappen NICHT mit Javascript und zusätzlichen Ebenen und was nicht alles.

Darum ging es mir doch: die ganz normalen Elemente einfach mal von hinten nach vorne blenden zu können. Einfach mal einen Z-Index-Wechseln das geht, aber sobald in der CSS bei derartigen Elementen groß rumgerührt wird, klappt das alles nicht mehr.

Mit den ganzen JQueries oder aufwändigen css-Konstrukten geht das natürlich.
Haben wir alle doch schon zu NOF-Zeiten gemacht. Ich wollte aber nicht alles von Hand bauen
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Ja aber wie soll das denn so einfach funktionieren? Mobirise baut auf einem der größten und umfangreichsten Frameworks, nämlich Bootstrap, auf.

Da sind Tausende von CSS-Klassen bereits vordefiniert, die man mit bedenken muss.

Mein Beispiel benötigt nur ein ganz klein bisschen CSS - keine JavaScripts oder jQuery - ganz banale CSS.

Was findest Du da so kompliziert?

Vielleicht findet man ja noch einen etwas einfacheren Weg. Das war ja nur eine von vielen Ideen. Ich habe auch die kommenden Tage so fast gar keine Zeit.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  index.html wird extra gecrawlt dj-acki 2 242 08.12.2019, 11:04
Letzter Beitrag: Tommy Herrmann
  Z-Index der Mobi-Galerie ändern? stobi_de 10 751 19.12.2018, 07:58
Letzter Beitrag: Tommy Herrmann
  Hintergrundbild wechseln? stobi_de 2 455 17.12.2018, 18:13
Letzter Beitrag: stobi_de
  Mobirise-no index, no robots,no follow-Wie umsetzen? Thomas Saake 12 1.946 21.04.2017, 08:44
Letzter Beitrag: Thomas Saake
  Textlink nach index.html auf einen "Anker" Thomas Saake 2 1.304 20.02.2017, 13:20
Letzter Beitrag: Thomas Saake



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!