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.

WordPress-Galerien

Lazyest Gallery :
arbeitet problemlos in Verbindung mit jQuery Lightbox. Manch anderes Lightbox-Plugin wird nicht erkannt und bringt die Meldung: Kein Lightbox-Plugin verfügbar.

wp content slider:
zeigt jeweils nur für ein Bild (mit Text, wenn gewünscht).

cSlider:
Die Slides lassen sich selbst anlegen (auch mit mehreren Bildern), aber der Fluß ist abgehackt, d.h. 5 Bilder slide 5 Bilder, also nicht Bild für Bild. Es wird sozusagen die ganze Seite umgeblättert.

nextgen gallery:
Es gibt viele Add ons wie z.B. JJNextGen JQuery Carousel.