Neu Zweites Bild bei hover in Artikelliste

frezno

Aktives Mitglied
18. März 2021
49
3
München
Beim hovern über einen Artikel in der ARtikelliste erscheint ein zweites Bild.
Gibt es inzwischen eine Möglichkeit das abzuschalten?
Die in diesem Post vorgeschlagene css-Lösung funktioniert bei mir nicht.

Was mach ich ggf falsch oder wie erreiche ich es, dass das zweite Bild beim hovern nicht mehr erscheint?
Template überschreiben?
 
  • Gefällt mir
Reaktionen: sah

ARA-Marketing

Offizieller Service Partner
SPBanner
2. Oktober 2008
995
129
Regensburg
Servus... also eigentlich sollte das schon noch gehen....

Code:
.list-gallery:hover img.first {  opacity: 1;}

.list-gallery:hover img.second {  opacity: 0;}

Hast das in die custom.css deines Child-Templates eingetragen ? Cache gelöscht ?


VG
Eas
 
  • Gefällt mir
Reaktionen: frezno

frezno

Aktives Mitglied
18. März 2021
49
3
München
Danke erstmal, auch für 'die andere' Antwort.

ich hab das NovaChild Theme angelegt und arbeite letztendlich damit.
dort habe ich die _variables, my-nova und my-nova.crit scss Dateien.
Beim Eintrag in my-nova klappt es
Aber wie du schon vorgeschlagen hast, werde ich es letztendlich sauber machen und ein ChildTheme anlegen.
Bin noch ganz neu mit JTL und muss mich da überall erstmal reinfuxen
 
Zuletzt bearbeitet:

mastertango

Sehr aktives Mitglied
10. Oktober 2009
2.475
42
Wustrow
so ganz sauber scheint man es aber einfach nicht raus zu bekommen oder hat hier einer eine Lösung?

Ich habe in der item_list.tpl folgendes geändert


Code:
  {if !$isMobile && !empty($Artikel->Bilder[0])}
                                                    {$image = $Artikel->Bilder[0]}
                                                    <div class="productbox-image square square-image second-wrapper">
                                                        <div class="inner">
                                                            {image alt=$image->cAltAttribut|escape:'html' fluid=true webp=true lazy=true
                                                                src="{$image->cURLKlein}"
                                                                srcset="{$image->cURLMini} {$Einstellungen.bilder.bilder_artikel_mini_breite}w,
                                                                    {$image->cURLKlein} {$Einstellungen.bilder.bilder_artikel_klein_breite}w,
                                                                    {$image->cURLNormal} {$Einstellungen.bilder.bilder_artikel_normal_breite}w"
                                                                sizes="auto"
                                                                class="second"
                                                            }
                                                        </div>
                                                    </div>
                                                {/if}

dazu noch in die CSS folgendes eingetragen

Code:
.list-gallery:hover img.first {  opacity: 1;}

.list-gallery:hover img.second {  opacity: 0;}

Ein kleines zucken beim rüberfahren mit der Maus bleibt immer noch
 

mastertango

Sehr aktives Mitglied
10. Oktober 2009
2.475
42
Wustrow
NAchtrag ....

das zusätzliche entfernen der folgenden Zeile bringt den gewünschten Effekt

Code:
class="{if !$isMobile && !empty($Artikel->Bilder[1])}first{/if}"
 

Ähnliche Themen