Blog Titel bei Mouse-Over einblenden

MeXxX

Hallo zusammen,
ich möchte bei meinen Blog-Beiträgen den Titel nur anzeigen, wenn man mit der Maus drüber fährt.
Hier der HTML Titel Code:
<div class="fusion-post-content-wrapper">

Vielen Dank und Grüße
Mexxx

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

AmFearLiath

ein link zur seite wäre besser um die genauen klassen rauszusuchen

ansonsten kannst du das relativ einfach selber gestalten...

Code

.title-element {
    display: none;
}


.parent-element:hover .title-element {
    display: block;
}

MeXxX

Hab den Coming Soon mal deaktiviert.
Hier der Link: http://ak-diefotografin.in/blog/
Vielen Dank!

AmFearLiath

um dir das zu veranschaulichen, könntest du folgendes verwenden:

Code

.fusion-post-content-wrapper {
    display: none;
}




.fusion-post-wrapper:hover .fusion-post-content-wrapper {
    display: block;
}

mit ein bisschen mehr, könnte man das vielleicht noch verschönern... ich z.B. würde die Textbox dann über das Bild legen

als Beispiel:

CSS

.fusion-post-content-wrapper {
    display: none;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    z-index: 100;
    padding: 12px !important;
}




.fusion-post-wrapper:hover .fusion-post-content-wrapper {
    display: block;
}




.fusion-post-wrapper {
    position: relative;
}




.fusion-post-content-wrapper h2 a {
    color: #fff !important;
}

Alles anzeigen

MeXxX

Einfach super! stell die Schrift noch einheitlich ein, dann ists perfekt.
Vielen Dank!

AmFearLiath

gerne doch :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Blog Titel bei Mouse-Over einblenden

Jetzt mitmachen!