• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Links mit Vorschaubild und Vorschautext, wenn man mit der Maus auf dem Link bleibt (wie bei Wikipedia).

DerLocke

Neues Mitglied
Online habe ich nur wenige Lösungen gefunden, die dann doch irgendwie nicht funktioniert hatten.

Mein Gedanke war, dass ich mit der Kasse wp-block-image size-large etwas anfangen kann. So das man auf jeden internen Link automatisch das Headerbild in klein sehen kann und dazu noch die ersten 30 Wörter im Text.

Ich bin auf meiner Suche gefühlte 10 Millionen mal auf Bildbenennung mit alt, title usw. gestoßen aber ich möchte kein Bild mit Text versehen, sondern den Textlink mit Bild, wenn man mit der Maus darüber fährt. So, dass man, wenn man mit der Maus darüber fährt sowohl das Beitragsbild als auch etwas Text sehen kann. So wie auf Wikipedia.

Die Klasse der Bilder ist immer unterschiedlich aber die Klasse von "figure" ist immer gleich. Vielleicht ´kann man damit etwas anstellen.

<figure class="wp-block-image size-large"><img loading="lazy" src="Bild.jpg" alt="Mundschutz. " class="wp-image-643575" srcset="Bild.jpg 300w, Bild.jpg 768w, Bild.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="341"><figcaption><strong>Text</strong> – <strong>Text</strong>!</figcaption></figure>

bei Wikipedia ist nur ein title, also muss das ja irgendwie automatisch gehen aber mir würde es schon reichen, wenn ich einfach z.B. class="beitragsbildmittext" oder so noch per hand einfügen muss.
 

Anhänge

  • 1.png
    1.png
    117,9 KB · Aufrufe: 10
Werbung:
Leider passiert nichts...

Habe bei Wordpress unter Stylesheet (style.css) folgendes eingefügt:

a.tooltip {
position: relative;
text-decoration: none;
}
a.tooltip:after {
content: attr(data-tooltip);
position: absolute;
bottom: 130%;
left: 20%;
background: #ffcb66;
padding: 5px 15px;
color: black;
-webkit-border-radius: 10px;
-moz-border-radius : 10px;
border-radius : 10px;
white-space: nowrap;
opacity: 0;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
}
a.tooltip:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid #ffcb66;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
opacity: 0;
left: 30%;
bottom: 90%;
}
a.tooltip:hover:after {
bottom: 100%;
}
a.tooltip:hover:before {
bottom: 70%;
}
a.tooltip:hover:after, a:hover:before {
opacity: 1;
}

Dann habe ich den Link mit class="tooltip" und data-tooltip="TextHalt" versehen aber es passiert nichts....

<a href="LinkVonDerSeite" class="tooltip" data-tooltip="Funktioniert leider nicht!">
Stet clita kasd gubergren
</a>

 
Werbung:
Ich weiss nicht was du da rausgesucht hast, aber normalerweise hat ein Tooltip einen JavaScript-Teil, welchen den Inhalt in data-tooltip dann in den Tooltip setzt. Dort wo du das her hast sollte es eine Anleitung geben.
 
Werbung:
Einen zweiten Beitrag brauchts nicht.

Wie gesagt, das nennt sich Tooltip. Zumeist musst du ein Script einbetten welches das Tooltip erstellt und mit Inhalt füllt. Nur mit CSS dürfte das was du gerne hättest nicht funktionieren.


Such Dir eines aus und bau es ein.
 
Wenn ich es richtig verstanden habe hätte er gerne ein Tooltip mit einem Bild und auch Text aus einem bestimmten tag und ich glaube da dürfte es mit CSS pur dann schwierig werden.
 
Werbung:
Zurück
Oben