Support » Plugins » Mouseover mit Bild im Vordergund

Mouseover mit Bild im Vordergund

  • opirata

    (@opirata)


    vor 8 Jahren, 4 Monaten

    Hallo,
    ich habe eine Frage.
    Es geht um diese „Navigation“:http://www.saborintenso.com/chef/
    Ich finde das ganz witzig mit den Bilder und dem Link, doch wie würdet ihr das machen?
    Ich fände es super, wenn sich beim mouseover wie dort auch die Farbe verändern würde.
    da ich noch ein relativer Anfänger bin, bekomme ich es nicht wirklich hin.
    Mag mir jemand sagen wie ich es machen könnte bzw. hat jemand einen Tipp ?
    gruß und schöne Weihnachten

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)
  • Moderator Bego Mario Garde

    (@pixolin)

    vor 8 Jahren, 4 Monaten

    Den Hover-Effekt bekommst du mit CSS hin.

    <ul class="rezepte">
<li>
	<a href="#"><img src="eins.jpg" alt="eins"></a>
	<h2><a href="#">Eins</a></h2>
</li>
<li>
	<a href="#"><img src="zwei.jpg" alt="zwei"></a>
	<h2><a href="#">Zwei</a></h2>
</li>

    Mit folgendem CSS werden die einzelnen Listenelemente mit Bild und Text beim Überfahren (Hover) grün hinterlegt:

    .rezepte li {
	list-style-type: none;
	display: inline-block;
	width: 200px;
	height: 300px;
	background: white;
}
.rezepte li:hover {
	background: green;
	color: white;
}

    Eine gute Einführung zu CSS findest du z.B. hier. Eine schöne Beschäftigung über die Feiertage ist auch der Online Kurs bei Codeacademy.

    Um das ganze in WordPress umzusetzen, müsstest du dein eigenes Theme entwickeln. Dafür müsste ich allerdings zu weit ausholen und dir (unter anderem) erklären, wie man eine eigene Beitrags-Abfrage schreibt und in der Abfrage-Schleife Beitragsbild und -Titel abfragt. Wenn du Einsteiger bist, erschlägt dich der PHP-Code vermutlich?

    Für den Anfang möchte ich Dir die Beitragsserie „Das eigene WordPress-Theme erstellen“ von Florian Brinkmann empfehlen.

    Thread-Starter opirata

    (@opirata)

    vor 8 Jahren, 4 Monaten

    Hallo Bego,
    da bin ich echt beeindruckt von deiner Antwort.
    Danke dir, da werde ich mich ganz sicher sofort dran machen.
    Wünsche dir noch einen tollen 2. Weihnachtstag.
    gruß

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)
  • Das Thema „Mouseover mit Bild im Vordergund“ ist für neue Antworten geschlossen.

Ansichten