Du hast dieses Bild: https://xx-xxx.de/images/blog
header/xxxxx.png und willst es zentriert im Beitrag
anzeigen.
Da Joomla oft Styles strippt, brauchst du eine Inline‑Lösung, die garantiert funktioniert.
Joomla Gallery makes it better. Balbooa.com
Light-Nova Bildstil für Joomla
Die CSS-Klasse.sk-nova-img-light verleiht Bildern in Joomla-Artikeln
einen modernen, hellen und klaren Look. Sie sorgt dafür, dass das Bild automatisch
zentriert wird und sich optisch harmonisch in den Artikel einfügt.
Der Stil kombiniert eine dezente Rundung, einen leichten Schatten und einen weißen Hintergrund, wodurch das Bild wie in einem kleinen Rahmen präsentiert wird. Gleichzeitig bleibt es vollständig responsiv und passt sich jeder Bildschirmgröße an.
Beim Überfahren mit der Maus hebt sich das Bild leicht an und der Schatten wird intensiver. Dadurch entsteht ein moderner, eleganter Hover-Effekt, der den Inhalt visuell aufwertet, ohne aufdringlich zu wirken.
Die Klasse eignet sich ideal für Artikelbilder, Headergrafiken oder Fotos, die
besonders hervorgehoben werden sollen.
Dies ist ein Link zu Beispiel
Erklärung der CSS-Klasse .sk-nova-img-light
Die folgende CSS-Klasse wurde erstellt, um Bilder in Joomla-Artikeln optisch aufzuwerten, sauber zu zentrieren und ihnen einen modernen, hellen Nova-Pro-Stil zu geben. Hier wird jede Eigenschaft verständlich erklärt.
Zentrierung und Layout
- display: block !important;
Wandelt das Bild in ein Blockelement um. Nur so kann es mitmargin:autozentriert werden. Das!importantüberschreibt Bootstrap und Template-Regeln. - margin-left/right: auto !important;
Erzwingt die horizontale Zentrierung des Bildes. - margin-top/bottom: 20px;
Fügt oben und unten Abstand hinzu, damit das Bild nicht am Text klebt.
Größe und Responsivität
- max-width: 900px;
Das Bild wird nie breiter als 900 Pixel. Ideal für Artikelbreite. - width: 100%;
Das Bild passt sich flexibel der verfügbaren Breite an – wichtig für Smartphones. - height: auto;
Verhindert Verzerrungen, da die Höhe automatisch berechnet wird.
Optik im Light-Nova-Stil
- border-radius: 12px;
Sanfte Rundung für einen modernen Look. - border: 1px solid rgba(0,0,0,0.08);
Sehr dezenter Rahmen, der Struktur gibt, ohne aufzufallen. - background: #ffffff;
Weißer Hintergrund, ideal für helle Artikelbereiche. - padding: 6px;
Erzeugt einen kleinen Innenabstand – wirkt wie ein Passepartout.
Schatten und Hover-Effekt
- box-shadow:
Zwei weiche Schatten erzeugen einen leichten, eleganten Tiefeneffekt. - transition:
Sorgt für sanfte Animationen beim Überfahren mit der Maus.
Hover-Zustand
- Stärkerer Schatten:
Das Bild wirkt aktiver und hebt sich leicht ab. - transform: translateY(-2px);
Das Bild bewegt sich minimal nach oben – ein moderner UI-Effekt.
Diese Klasse ist so gestaltet, dass sie in Joomla-Artikeln zuverlässig funktioniert,
auch wenn Bootstrap oder Template-Regeln normalerweise das Styling überschreiben würden.
/* Light-Nova Bildklasse – zentriert & hell */
/* Universelle Bildzentrierung für alle Browser */
.sk-nova-img-light {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center; /* falls Container Einfluss nimmt */
max-width: 900px;
width: 100%;
height: auto;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.08);
background: #B1976B;
padding: 6px;
box-shadow:
0 0 12px rgba(0,0,0,0.08),
0 0 24px rgba(0,0,0,0.06);
transition: box-shadow 0.3s ease, transform 0.25s ease;
}
.sk-nova-img-light:hover {
box-shadow:
0 0 18px rgba(0,0,0,0.12),
0 0 32px rgba(0,0,0,0.10);
transform: translateY(-2px);
}
/* Container-Fix für Edge */
.item-image,
.article-content img {
text-align: center !important;
}