Das Plugin, das du benötigst heißt Simple Custom CSS. Damit kannst du zu deinem Theme beliebiges, individuelles CSS hinzufügen.
Vereinfacht ausgedrückt sieht das in etwa so aus:
HTML
<div class="aussen">
<div class="mit-hintergrund"></div>
</div>
CSS
.mit-hintergrund { background: url('tolles-bild.jpg') no-repeat; }
Beim Überfahren wird dem Abschnitt die Opazität hinzugefügt:
.aussen:hover { opacity: 0.1; background-color: #836259; }
Hallo Bego,
vielen Dank für deine Antwort und die Korrektur meines Links.
Leider bin ich mit CSS überhaupt nicht vertraut. Ich habe das Plugin herunter geladen und den von dir gegebenen CSS-Code eingefügt. Bei einem Bild, das ich auf einer Seite der Homepage eingebunden habe, habe ich die CSS-Klasse „mit-hintergrund“ angegeben. Leider funktioniert es nicht und ich weiß nicht warum.
Könntest du mir damit noch auf die Sprünge helfen? Was mache ich mit dem HTML-Code?
Oder anderen Falls, gibt es eventuell auch ein Plugin mit dem ich es erreiche, dass sich Bilder beim darüberfahren mit der Maus ändern?
Mit freundlichen Grüßen
Stefan
Der Code war nur sinnbildlich gemeint, nicht zur direkten Umsetzung. Dafür müsste ich deine Website und die verwendeten Templates kennen, ein Child Theme erstellen, eine Rechnung schreiben …
Wir geben dir hier gerne Hilfe zur Selbsthilfe. Der Sinn des Forums ist aber nicht, dir CSS und HTML beizubringen. Also musst du entweder viel selbst lernen (eine gute Anlaufstelle wäre das Mozilla Developer Network) oder jemanden beauftragen, der sich damit auskennt.
Ein Plugin, das nach Installation selbständig „Bilder beim darüberfahren mit der Maus ändert“ ist mir nicht bekannt. Wie gesagt, werden das die meisten wohl mit einem Child Theme oder Custom CSS umsetzen. Dafür habe ich dir ein Plugin genannt.
Natürlich werde ich mich einarbeiten 😉
Hatte nicht erwartet, dass jemand mir die Arbeit abnimmt. Hast mir mit dem CSS Hinweis aber schon ein ganzes Stück weitergeholfen.
Ist so ziemlich alles Neuland für mich.
Wird schon werden.
Lieber Gruß
Stefan
Hallo Stefan,
Bei einem Bild, das ich auf einer Seite der Homepage eingebunden habe, habe ich die CSS-Klasse „mit-hintergrund“ angegeben. Leider funktioniert es nicht und ich weiß nicht warum.
Du musst sowohl HTML-Code (also beide Divs als auch die CSS-Klassen) eingeben sowie auch den CSS-Code in die Custom-CSS-Datei. Wenn man den Code von Bego nimmt, erhält man folgendes Ergebnis:
http://codepen.io/anon/pen/mVmLJG
Die Frage ist primär, was du erreichen möchtest. Klar ist ja, dass du am liebsten das Bild austauschen würdest, bei Maus hover. Wenn es nur für wenige Bilder sein soll, kann man auf diese Lösung mit Hintergrundbildern setzen:
http://codepen.io/anon/pen/MKmGKy?editors=110
Für viele Bilder setzt man auf den Austausch der Bilder selbst, mit „src“ eingebunden. Geht auch, ist aber ein anderer Code. Dafür baut man immer dasselbe HTML-Gerüst (inkl. CSS) drum herum, wechselt aber immer nur das Bild selbst.
Die Lösung mit Hintergrundbildern hingegen arbeitet bei mehreren Bildern mit wechselndem HTML-Gerüst plus wechselnden Bildern plus geändertem CSS. Also zum Beispiel „mit-hintergrund“, „mit-hintergrund1“ (usw), „aussen“, „aussen2“ usw.
Hoffe, das hilft dir weiter. Das Beispiel im zweiten Link, zeigt dir ja bereits den Austausch für ein Bild.
