Vorab: Ich arbeite aus Gründen nicht mit Elementor, aber eigentlich ist das für die Frage auch nachrangig. Ich habe mich hier um eine Lösung mit den CSS-Klassen bemüht, die der Block-Editor verwendet.
Um Farbbilder im Browser in Graustufen darzustellen, kannst du in CSS eine Filterregel anwenden, z.B.
.blocks-gallery-item img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
Um die Bilder dann bei Mauszeigerkontakt wieder farbig darzustellen, hebst du den Filter wieder auf:
.blocks-gallery-item img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
Soweit warst du wohl auch schon. 🙂
Wenn ich deine Frage richtig verstanden habe, möchtest du nun wissen, wie man es schafft, dass die Bilder beim Verlassen farbig dargestellt bleiben. Dazu kannst du z.B. mit jQuery eine Funktion hinzufügen, die dem Bild bei Mauszeiger-Kontakt eine neue CSS-Klasse zuweist. Damit jQuery überhaupt funktioniert (du hast nicht angegeben, mit welchem Theme du arbeitest), musst du dazu jQuery erst einmal einbinden. Die Funktion kannst du entweder in der functions.php deines Child-Theme anhängen oder mit dem Plugin Code Snippets hinzufügen:
add_action('wp_enqueue_scripts', 'i_want_jquery' );
function i_want_jquery() {
wp_enqueue_script('jquery');
}
Nun fügen wir außerdem die jQuery-Funktion hinzu, mit der die CSS-Klasse bei Mauszeigerkontakt hinzugefügt wird:
add_action( 'wp_head', 'stay_hovered' );
function stay_hovered() { ?>
<script>
jQuery(function($){
$('.blocks-gallery-item img').on( 'mouseenter', function() {
$(this).addClass('active') });
});
</script>
<?php }
Nun wird jedem Bild der Galerie bei Mauszeigerkontakt die CSS-Klasse active zugewiesen, die hinzugefügt bleibt, bis du die Webseite neu lädst. Damit das auch eine Auswirkung hat, müssen wir die CSS-Regel ergänzen, die den Graustufenfilter wieder entfernt:
.blocks-gallery-item img:hover,
.blocks-gallery-item img.active {
filter: none;
-webkit-filter: grayscale(0);
}
Fährst du nun über die schwarzweiß dargestellten Bilder der Galerie, werden sie nicht nur farbig dargestellt, sondern bleiben auch farbig.
Das lässt sich sicher auch in ein Plugin umwandeln, wobei ich aber die Lösung mit Customizer und Code Snippets eigentlich für ausreichend halte. Ein fertiges Plugin ist mir nicht bekannt. Ich kenne zwar nicht alle rund 58.000 Plugins, kann mit aber auch nicht vorstellen dass es zu diesem doch eher speziellen Wunsch bereits ein fertiges Plugin gibt.
Noch eine kleine Erinnerung: Wir haben hier nicht den Anspruch, Grundlagen in CSS, HTML, PHP und/oder JavaScript zu vermitteln. Ich wollte aber nicht nur schreiben „das kannst du mit JavaScript oder jQuery lösen“, weil die Antwort dann doch etwas arg knapp ausgefallen wäre.
