Bild-Hover-Effekt in CSS

Einfach aber effektvoll … hover in CSS und HTML im Texteditor für Bildgalerien oder Menüleisten.

Bildbearbeitung:
Zunächst legen wir in Photoshop „Doppelbilder“ an, die wir später mittels Verschieben zum Hovereffekt bringen.

hover

CSS:
Mit dem CSS-Befehl: a background-position: 0px; und a:hover background-position: 0 -190px; verschiebt sich das Bild um 190 Pixel.
0 px in die horizontale, 190 in die vertikale Richtung (nach unten).
Das sieht aus, als ob ein anderes Bild geladen wird, dabei wird es bloß innerhalb des div-Containers verschoben.
Einfacher Code, großer Effekt.

Was ist ein CMS

Im Gegensatz zur „normalen“ Webseite in HTML und CSS, gibt es beim Content Management System ein Frontend und ein Backend. Das Frontend ist die Webseite, die man im Internet sieht. Das Backend ist die Oberfläche (Dashboard), in die man sich einloggen muss und dort Änderungen an der Webseite online vornehmen kann.

Content Management System heißt Inhalte verwalten.
Die erstellten Inhalte/Contents sind getrennt vom Layout/Theme.

Artikel, Seiten, aber auch Plugins wie Theme Switcher, LazyGallery, etc. sind global, also unabhängig vom Layout/Theme, also egal welches Layout/Theme gewählt wird, in Verwendung. Zum Inhalt/Content gehören also: Seiten, Artikel, Plugins, Bilder.

Zum Layout/Theme gehören die CSS-Dateien wie style.css und die PHP-Dateien wie header.php, page.php und functions.php. Diese Dateien sind also für jedes Layout/Theme anders. Die Layouts/Themes liegen im Ordner wp_contents/themes/

In WordPress kann man verschiedene Benutzer mit unterschiedlichen Rechten anlegen. Nur der Administrator hat das Recht das Layout/Theme zu verändern. Der Autor kann lediglich Artikel anlegen und Bilder hochladen. Der Redakteur kann auch neue Seiten erstellen.