::After-Pseudoelement mittig zu Element platzieren

[Tobias]

Hallo ihr Lieben,

ich bräuchte einmal Hilfe beim Gestalten einer Webseite mit CSS. Ich habe dort Profilbilder von Menschen, auf die man klicken soll. Dann öffnet sich deren Profil:

Ich habe ein ::after Pseudoelement zur "Profilbild"-Klasse der Bilder (= img in figure, erzwingt wordpress so) erstellt. Darin ist der content "-> Profil". Ich möchte jetzt, dass der Schriftzug immer mittig zum Foto angezeigt wird.

Momentan sieht meine Notlösung wie folgt aus:

.Profilbild {
    position: relative;
		transition-duration: 0.2s;
}

.Profilbild img {
	transition-duration 0.2s;
}

.Profilbild::after {
    content:  '→ Profil';
    font-family: 'GrueneType';
    align-self: center;
    color: white;
    font-size: 20px;
    display: block;
    position: absolute;
		left: 37%;
    bottom: 1em;   
		transition-duration: 0.2s;
}

.Profilbild:hover::after {
	font-size: larger;
	transition-duration: 0.2s;
}
.Profilbild img:hover {
	  box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
    transform: scale(1.01);
    transition-duration: 0.2s;
}

Das ist jetzt aber nicht optimal, da sich die width des <div>-containers je nach viewport verändert, sodass der Abstand von links sich auf die Position im <img> auswirkt. Manchmal ist der Textzug weiter links, mal mittiger.

Habt ihr eine bessere Lösung, die an den effekt von text-align: center herankommt?

Vielen Dank schon einmal!

[Gunnar Bittersmann]

@@Tobias

Ich habe dort Profilbilder von Menschen, auf die man klicken soll.

Die Bilder stecken in a-Elementen? Ansonsten ist da nichts, worauf man (= alle, auch Tastaturnutzer) clicken können.

Darin ist der content "-> Profil".

Das sieht mir eher nach Inhalt aus, der im HTML stehen sollte, nicht als Verzierung per CSS.

Ich möchte jetzt, dass der Schriftzug immer mittig zum Foto angezeigt wird. […] Manchmal ist der Textzug weiter links, mal mittiger.

Kein Wunder bei

.Profilbild::after {
  position: absolute;
  left: 37%;
  bottom: 1em;   
}

Habt ihr eine bessere Lösung, die an den effekt von text-align: center herankommt?

Nicht absolute Positionierung verwenden. Sondern CSS Grid; da kannst du auch verschiedene Grid-Items in dieselbe Zelle packen.

.Profilbild:hover::after {
	font-size: larger;
	transition-duration: 0.2s;
}

Keine so gute Idee. Aus Performanz-Gründen sollte man nur bestimmte CSS-Eigenschaften animieren. font-size gehört IIRC nicht dazu. Aber scale.

Aber auch keine so gute Idee. Ich finde diese Art Hover-Effekt nicht nur völlig unnötig, sondern auch nervig. Wenn, dann gehört sowas in einen @media not (prefers-reduced-motion)-Block, damit der Wunsch der Nutzer, die soetwas nicht haben wollen (in den OS-Einstellungen angegeben), respektiert wird.

Alles anzusehen in diesem Beispiel.

Und da sieht man auch schon das nächste Problem: Wie stellst du sicher, dass die weiße Schrift auf dem Hintergrundbild lesbar ist, wenn es bei manchen Bildern dort hell ist?

Ein Gradient könnte etwas (aber nur etwas) Abhilfe schaffen. (Auskommentierung entfernen.)

Und du musst der Box eine dunkle Hintergrundfarbe geben – für den Fall, dass das Bild nicht geladen wird.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

Kontrast Text/Bild

Beispielsweise so:

figcaption {
  --shadow-color: black;
}
figcaption::before {
  content: "-> Profil";
  color: white;
  text-shadow:  2px  2px 3px var(--shadow-color),
               -2px  2px 3px var(--shadow-color),
                2px -2px 3px var(--shadow-color),
               -2px -2px 3px var(--shadow-color);
}
a:is(:focus,:hover) figcaption::before {
   color: darkblue;
   --shadow-color: yellow;
}

Ob das ideal ist, sei dahingestellt. Mir ging's jetzt um die Texthervorhebung mit text-shadow. Statt dessen könnte man auch -webkit-text-stroke verwenden (was alle Browser können).

Das "→ Profil" ist ein visueller Hinweis auf den verlinkten Inhalt. Kann man machen, denke ich, wenn es noch einen visuell versteckten Zusatztext gibt, der einen Screenreader dazu bringt, korrekt ansagen, dass man auf einem Link ist, der zum Profil von Moritz Mustermann führt. Wie man das auf der Seite von Tobias konkret gestaltet, müsste man am lebendigen Subjekt sehen, deswegen fragte ich ja nach einem Link auf die Seite. Dann kann man auch Rat geben, wie man das konkret mit grid löst.

Rolf

[Rolf B]

Hallo Tobias,

das .Profilbild hat sicher auch eine figcaption, worin steht, wen dieses Bild zeigt?

Um das Profil zu öffnen, brauchst Du einen Link. Wie hat Wordpress den angeordnet? Ein :hover auf das img Element ist ungünstig, weil damit keine Hervorhebung bei Tastatursteuerung erfolgt. Wenn der Link das ganze Bild abdeckt, wäre dort ein :is(:hover,:focus) geeignet, um die Hervorhebung auszulösen.

Den "→ Profil" Text kannst Du in ein ::before-Element von figcaption einsetzen. Dem gibst Du bottom:100%, left:0 und width:100%, dann sollte das "→Profil" direkt über der figcaption stehen und Du kannst es mit text-align:center zentrieren.

Genauer ist das schwer zu sagen, weil ich nicht weiß, wie dein Template figure, img und figcaption zueinander anordnet. Dafür müsste man die Seite sehen. Hast Du einen Link?

Rolf