Suche Hover-Effekt-Erweiterung für J3-Komponente Banner

schulzdesign · 25. Juli 2019

Hallo zusammen,

ich suche eine Erweiterung für Joomla 3.9.x, mit der ich mit der internen Joomla-Komponente "Banner" eingebundene Banner mit einem Hover-Effekt versehen kann.

Ich möchte Refrenzen als Bannerlogo in meine Webseite einbinden, die im Normalzustand grau sind.

Wenn man mit der Maus darüber fährt sollen sie farbig werden. Mausover / Hover Effekt.

Die Komponente kann so sein, dass sie die Bilder automatisch färbt, oder mit 2 Bildern arbeitet.

Bild1 = Standard / Bild2 = Hoverbild

Meine Suche hat mir immer nur Ergebnisse für Bannerslider etc. gebracht.

Hat jemand eine Idee?

Ich bin für jeden Tipp dankbar.

Beste Grüße,

Thorsten Schulz

Werbeagentur Schulz-Design e. K.

Indigo66 · 25. Juli 2019

Mir ist keine <erweiterung bekannt, die sich da an die Bannerkomponente anhängt um das Design anzupassen.

Aber mit ein paar wenige Zeilen CSS (Stichwort Grayscale) könnte das zu machen sein. Ein Link zur Seite wäre hilfreich oder Du probierst selbst: https://www.css3.de/css3-filter-grayscale.html

JohannesK · 25. Juli 2019

Dafür brauchst du keine Erweiterung. Du musst nur ein bisschen das CSS editieren. Du nimmst das ganz normale farbige Bild und setzt die CSS Klasse mit einem Filter auf sw. Dann gibst du der CSS Klasse ein :hover element im CSS und entfernst da den Filter wieder.

Edit: Indigo66 war schneller...

christine2 · 25. Juli 2019

Hallo,

Zitat von schulzdesign

dass sie die Bilder automatisch färbt, oder mit 2 Bildern arbeitet.

Bild1 = Standard / Bild2 = Hoverbild

Gute Tipps hast Du ja schon von Indigo66 & JohannesK bekommen.

Deswegen nicht sicher, ob folgender Link ev. auch interessant für Deine Zwecke ist. Beziehe mich da auf: "... oder mit 2 Bildern arbeitet":

html5 picture und srcset tags verwenden

Liebe Grüße

Christine

schulzdesign · 30. Juli 2019

Hallo ihr Lieben,

erst mal vielen Dank für eure Antworten und Tipps.

Indigo66: Klar, ein Link.... Sorry. Hier ist er: https://www.hannover-united.de/index.php

Mit dem Artikel bin ich nicht so richtig klar gekommen.

JohannesK: Danke dir. Meine CSS-Kenntnisse sind da eher noch Vorschule. Hast du einen Codeschnipsel für mich?

christine2: Lieben Dank, aber das ist nicht so das wonach ich suche.

Wenn's hilft, ich habe eine CSS-Datei, damit die Banner passend nebeneinander angezeigt werden.

CSS

.banneritem {
    display: inline!important;
    width: auto;
    float: left;
    margin: 10px;
    min-width:200px;

}

.bannergroup
{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display:flex;
    flex-wrap:wrap;
}

@media (max-width:767px)
{
  .banneritem
  {
    min-width:200px;
    max-width:450px;
  }
}

Alles anzeigen

Liebe Grüße,

Thorsten

Indigo66 · 31. Juli 2019

Zitat von schulzdesign

Mit dem Artikel bin ich nicht so richtig klar gekommen.

Ist eigentlich dort sehr gut beschrieben.

CSS

img.cycle-slide {
    filter: grayscale(100%);
}
img.cycle-slide:hover {
    filter: grayscale(0%);
}

Füge das in Deine CSS-Datei hinzu.

schulzdesign · 31. Juli 2019

Hallo Indigo66,

vielen Dank für deine grandiose Hilfe

Das funktioniert bei den geslideten Bannern wunderbar.

Nur die statischen Banner werden davon nicht berührt. Vermutlich muss .banneritem noch dazu gefügt werden, richtig?

Hast du dazu noch eine Idee?

schulzdesign · 31. Juli 2019

Genau das war's

}

.banneritem {

filter: grayscale(100%);

}

.banneritem:hover {

filter: grayscale(0%);

}

Tags