Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Eines der letzten Probleme, die ich auf der neuen WP-Site lösen möchte, ist die Darstellung alter und neuer Gebäude per Mouseoverbild (nennt man das Rollover?). Ich möchte es so machen, wie auf der alten Site:
https://www.ehrenbreitstein.de/NOF/altundneu.html
Ich nutze ein Theme und den PageBuilder von DesignersInn. Gibt es ein PlugIn für diesen Zweck? (und ich habe gesucht, aber nicht das genau passende gefunden) Danke.
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
moin moin,
warum nicht einfach mit css lösen?
aktuell wird da noch eine js geladen, ist völlig untötig.
hier ein schönes beispiel mit einer schönen transition
https://codepen.io/creativeprogrammer/pen/RpBpgm
oder zb. ein modul https://wordpress.org/plugins/flip-boxes/
oder einfach nach flip box gucken.
es gibt viele möglichkeiten
warum nicht einfach mit css lösen?
Weil für einen beschränkt denkenden Menschen wie mich css zu den letzten Geheimnissen dieser Welt gehört o_O. Ich hab zwar vor mir ein Buch "CSS3" von Markt + Technik hier
stehen, aber bis ich verstanden habe, wie ich das le(ö)sen muss kann ich meine Finger nicht mehr bewegen.
Zitat von Henk1060aktuell wird da noch eine js geladen, ist völlig untötig.
Du meinst auf der alten Site, mit NetObjects erstellt?
Zitat von Henk1060
hier ein schönes beispiel mit einer schönen transition
https://codepen.io/creativeprogrammer/pen/RpBpgm
Das ist genau das, was mir gefällt. Wenn ich jetzt noch heraus kriege, was ich wo hin setzen muß, bin ich wieder froh :). Zumindest habe ich schon herausgefunden, wie die beiden Fotos heißen und wo sie dann im Code erscheinen müssen. Aber wie ich den Code unter HTML und/oder den unter CSS hinsetzen muß bleibt mir noch verschlossen. Ich kann sie ja wohl nicht unter "Zusätzliches CSS" setzen, denn das werden gut 20 Fotos, die ich einzeln bearbeiten muss.
Ich werde daran arbeiten.
Hier werde ich sicher große Teile des kommenden Wochenendes verbringen. Dank Euch beiden :)
eigentlich brauchts du nur die Css in den customizer einmal eintragen.
Den body eintrag kannst du weg lassen ;)
also
.swap-on-hover {
position: relative;
margin: 0 auto;
max-width: 400px;
}
.swap-on-hover img {
position: absolute;
top:0;
left:0;
overflow: hidden;
/* Sets the width and height for the images*/
width: 400px;
height: 400px;
}
.swap-on-hover .swap-on-hover__front-image {
z-index: 9999;
transition: opacity .5s linear;
cursor: pointer;
}
.swap-on-hover:hover > .swap-on-hover__front-image{
opacity: 0;
}und dann einfach html.
immer die bild links austauschen, das sollte ja nicht das problem sein.
Da die bilder sicher in der mediathek liegen
<figure class="swap-on-hover">
<img class="swap-on-hover__front-image" src="https://link-zum-vorschau-bild.jpg"/>
<img class="swap-on-hover__back-image" src="https://Link-zu-hover-bild.jpg"/>
</figure>Code<figure class="swap-on-hover"> <img class="swap-on-hover__front-image" src="https://link-zum-vorschau-bild.jpg"/> <img class="swap-on-hover__back-image" src="https://Link-zu-hover-bild.jpg"/> </figure>
Ist das "swap-on-hover" der Class Name? Kann denn die Class immer den gleichen Namen haben? D.h. es wird immer nur der Bildname ausgetauscht? (Konnte es noch nicht ausprobieren)
ja, genau so sollte es funktionieren.
und dann einfach html.
immer die bild links austauschen, das sollte ja nicht das problem sein.
Da die bilder sicher in der mediathek liegenCode<figure class="swap-on-hover"> <img class="swap-on-hover__front-image" src="https://link-zum-vorschau-bild.jpg"/> <img class="swap-on-hover__back-image" src="https://Link-zu-hover-bild.jpg"/> </figure>
Das überfordert mich schon. Wohin muß ich denn HTML hinkopieren? Dieses hier
"https://link-zum-vorschau-bild.jpg" ist doch nicht der Link zum Bild. Das liegt zwar in der Mediathek,
aber irgendwo unter /Ehrenbreitstein/wp-content/uploads usw. Oder?
Wohin muß ich denn HTML hinkopieren?
leider kenne ich die seite nicht wo du das einbauen möchtest.
und oder mit welchen Editor du arbeitest.
kannst denn Html teil dort einfügen wo du in haben möchtest.
Den genauen bild pfad siehtst du in der mediathek wenn du auf das Bild klickst.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!