Home → Contao →

Verwendung: Mouse-over auf Bild

• Edit

Reinhard

14 Jan, 2016 09:11 PM

Produkt: Tao Contao

Wenn man in den Bildeinstellungen Großansicht/Neues Fenster (Lightbox) ankreuzt, wird beim mouse-over ein Mittenkreuz mit unscharfem Bild angezeigt. Kann man diese Animation selektiv per ccs-Klasse bzw. nur global abstellen? Mit der css-Klasse not-animated hatte ich keinen Erfolg.

1. Support Staff 1 Posted by RockSolid Theme... on 15 Jan, 2016 08:58 AM

   

   Vielen Dank für Ihre Frage.

   Global können Sie das über den Theme Assistant abstellen indem Sie die Einstellung „Bild-Mouseover-Effekt“ deaktivieren.

   Um den Effekt für einzelne Elemente zu deaktivieren, fügen Sie bitte folgenden CSS-Code in die Datei files/tao/css/custom.css ein:

   .image_container.no-hover a img,
   .no-hover .image_container a img {
       -webkit-filter: none;
       -moz-filter: none;
       filter: none;
       -webkit-transform: none;
       -moz-transform: none;
       -ms-transform: none;
       -o-transform: none;
       transform: none;
   }
   .image_container.no-hover a:before,
   .image_container.no-hover a:after,
   .no-hover .image_container a:before,
   .no-hover .image_container a:after {
       content: none;
   }
   

   Vergeben Sie danach den gewünschten Elementen die CSS-Klasse no-hover.

   • Edit

2. 2 Posted by Reinhard on 15 Jan, 2016 09:32 AM

   

   Vielen Dank für die immer perfekte Hilfe. Im Theme-Assistant hatte ich noch gar nicht so genau diese Einstellung wahrgenommen. Ich finde jedoch die Einstellung ganz gut und eigenständig für Tao und werde nur selektiv über die css-Klasse operieren. Dafür besten Dank für den Code.
   Viele Grüße aus Berlin.

   • Edit

3. 3 Posted by shopmail on 25 Sep, 2024 10:12 AM

   

   Hallo,
   wie muss der Code für Contao 5.13 aussehen?
   Laut Update-Dokumentation soll man .image_container mit figure ersetzen, das funktioniert aber nicht:

   figure.no-hover a img,
   .no-hover figure a img {
       -webkit-filter: none;
       -moz-filter: none;
       filter: none;
       -webkit-transform: none;
       -moz-transform: none;
       -ms-transform: none;
       -o-transform: none;
       transform: none;
   }
   figure.no-hover a:before,
   figure.no-hover a:after,
   .no-hover figure a:before,
   .no-hover figure a:after {
       content: none;
   }

   • Edit

4. Support Staff 4 Posted by RockSolid Theme... on 26 Sep, 2024 10:13 AM

   

   Vielen Dank für Ihre Frage.

   Für Contao 5 können Sie folgenden CSS-Code verwenden:

   .no-hover figure a:hover:after,
   .no-hover figure a:focus:after,
   .no-hover .image_container a:hover:after,
   .no-hover .image_container a:focus:after,
   .no-hover.image_container a:hover:after,
   .no-hover.image_container a:focus:after,
   .no-hover figure a:hover:before,
   .no-hover figure a:focus:before,
   .no-hover .image_container a:hover:before,
   .no-hover .image_container a:focus:before,
   .no-hover.image_container a:hover:before,
   .no-hover.image_container a:focus:before {
       content: none;
   }
   .no-hover figure a:hover img,
   .no-hover figure a:focus img,
   .no-hover .image_container a:hover img,
   .no-hover .image_container a:focus img,
   .no-hover.image_container a:hover img,
   .no-hover.image_container a:focus img {
       filter: none;
       transform: none;
   }
   

   • Edit