Hallo, wir haben teilweise Artikel die zwei unterschiedliche Seiten haben. Gibt es irgendwie die Möglichkeit einen Turn Over Effekt zu erzeugen wie in diesem Beispiel hier: https://scryfall.com/card/khm/112/tergrid-god-of-fright-tergrids-lantern Wir könnten natürlich zwei Artikelbilder hochladen (Vor und Rückseite) aber das mit dem Turn Over Effekt wäre schon ziemlich cool. @Dominik Späte du hast doch bestimmt eine Idee oder?
Da fällt mir der Adventskalender ein. Da hast du ein sichtbares Bild und wenn Du mit der Maus drüber gehst, sieht man die Zahl darunter. Das müsste auch mit 2 Bildern gehen, denke ich. Das wäre dann nur ohne Button, sondern mit Mausover Nur wird das nicht als Artikelbild funktionieren, sondern müsste vermutlich in den Artikeltext.
Ja sowas wäre perfekt. Aber dann müsste ich doch die class von dem jeweiligen Artikelbild mitgeben oder? Wir benötigen das halt nicht bei allen Artikeln. Ich denke da wir das Problem sein da man gewissen Artikel ja keine Klasse zuweisen kann? und <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;"> </div> <div class="flip-card-back"> <- das müsste dann wieder die .png von der Rückseite sein? <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div>
Dominik hatte mir mal einen Code geschrieben, bei dem ein Text bei nur einem bestimmten Artikel angesprochen wurde. Ob man auf diese Weise auch ein Bild eines einzelnen Artikel ansprechen kann? (Link nur für registrierte Nutzer sichtbar.)
Ja da nutzen wir auch schon für ein anderes Feature. In dem wir beim Artikelbildnamen ein Attribut mitgeben. Meine Überlegung wäre nun im Bildnamen das Attribut "Flip" mitzugeben. Aber weiter sind meine Gedanken noch nicht ^^
das hört sich gut an. Wenn du damit genau dieses Bild ansprechen kannst, versuch es doch damit mal. Darf ich fragen wie du dem Artikelbildnamen ein Attribut mitgibst?
Das hat uns damals glaube ich ebenfalls Dominik gezeigt. Code: img[alt$="(Attribut)"]{ color:grey; display:inline-block; usw... Und beim Artikel schreibst du dann beim Bildnamen einfach (Attribut) hinter dem Bildnamen.
danke. wieder was gelernt. Hab es gerade getestet. Ich kann damit das Bild ansprechen. Das funktioniert. Aber für den Flip-Code brauche ich mehrere Klassen.... Ich glaube das geht nicht.
also irgendwie muss es gehen. Ich habe zumindest einen Effekt hinbekommen. Aber komme einfach nicht weiter.... zuerst habe ich dem Bildname ein (flip) hinten angehängt. und auch bei "Alternativtext" habe ich (flip) geschrieben. Dann hab ich diese Codes ins CSS geschrieben: Code: img[alt*="flip"]{ padding: 200px; } img[alt*="flip"]:hover{ background-image: url("https://www.xyz.jpg"); } Es ist optisch natürlich eine Katastrophe. Aber es funktioniert zumindest, dass es das Hover-Bild anzeigt, wenn ich mit der Maus drüber fahre. Vielleicht ist es eine Basis zum experimentieren....
ich glaube ich habs. du musst ein transparentes Artikelbild hochladen. Dieses dann mit (flip) versehen. und dann diesen Code: Code: img[alt*="flip"]{ transition: transform 1.7s; background-image: url("https://www.bild1.jpg"); } img[alt*="flip"]:hover{ transform: scaleX(-1); background-image: url("https://www.bild2.jpg"); } Die Größe der Bilder musst dann noch mit in die Codes schreiben.
Wie meinst du das mit transparentem Artikelbild? Der Artikel hat ja zwei verschiedene Seiten? Kannst du mir aufzeigen wie ich das dann für ein Artikel machen müsste? Diesen Code im Theme als CSS? Code: [code]img[alt*="flip"]{ transition: transform 1.7s; background-image: url("https://www.bild1.jpg"); } img[alt*="flip"]:hover{ transform: scaleX(-1); background-image: url("https://www.bild2.jpg"); } [/code] Und im Artikel dann bei den Bildern das Attribut flip hinzufügen? Habe es gerade mal getestet. Aber er wechselt das Bild nun von links nach rechts. Also er macht es spiegelverkehrt Das Problem ist, dass man dem Code ja auch keine backgorund images mitgeben darf. Es muss so sein, dass erkannt wird wo flip als Attribut hinterlegt ist dann die beiden eingestellten Artikelbilder angezogen werden.
du lädst im Artikel ein transparentes (durchsichtiges) Bild hoch. ich kann dir eins schicken, wenn du magst. Bei dem Bild Namen schreibst du (flip) dahinter. Und bei Alternativtext schreibst du auch (flip) und dann kannst du als Background-bilder die Bilder im CSS-Code eintragen.
Ich glaube das funktioniert nicht. Das würde bedeuten, dass man für jeden Artikel immer wieder neuen css code eintragen müsste? Oder habe ich da einen denkfehler?
Das ist unmöglich. Das muss irgendwie anders funktionieren. Ich habe an Variablen gedacht. Soll bedeuten wenn ein Artikel als Attribut "Flip" besitzt soll Bild 1 angezeigt werden und als hover Bild 2
bei meinem Beispiel findet er durch das (flip) zum transparenten Bild in diesem Artikel und setzt dann die 2 Bilder als Background ein. Jeder Artikel benötigt dann seinen eigene Bezeichung und seinen eigenen CSS Code. Sorry. Einen anderen Weg finden vielleicht die Profis hier.
Ich finde den Ansatz super. Aber bei einer riesen Anzahl von doppelseitigen Artikeln wird das krass aufwendig. Man bräuchte irgendwie einen css Ansatz wo ich nur das Attribut "Flip" mitgebe und es wird erkannt das dort zwei Bilder beim Artikel hinterlegt sind. Ich hoffe du verstehst mein Problem dabei
da bin ich ganz bei dir. sag Bescheid wenn du dazu eine Lösung hast. Das wäre für mich auch interessant.
Mache ich gerne. Aber ich glaube da muss tatsächlich einer der Profis uns einen Tipp geben. Ich hatte Domink angeschrieben. Er hat den Post hier schon mitgelesen und er lässt es sich mal durch den Kopf gehen