Trick # 467 | Dieser Beitrag beinhaltet 325 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.
Mit Filtern lässt sich im Webdesign so einiges anstellen. Nach der Anwendung des heutigen CSS-Effekts werden die Miniaturansichten Ihres Blogs, Portfolios oder Shops beim Hovern zu Schwarz-Weiss-Bildern.
Kopieren Sie den folgenden Code-Block und fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein. Sie können es im Backend Ihrer Website bearbeiten unter Design/Customizer/Zusätzliches CSS:
.et_shop_image:hover, .et_portfolio_image:hover, .et_pb_post img:hover {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: grayscale(100%);
}
.et_pb_post img{
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.et_overlay {
background: rgba(255, 255, 255, .25);
}
.et_overlay:before {
color: #fff !important;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay {
opacity: 1;
border: 0 solid #e5e5e5;
}Das war’s auch schon. Wenn Sie nun den Mauszeiger über ein Bild der Beitragsübersicht bewegen, wird das Bild in Grautönen dargestellt.
Werbung
Das Galerie-Modul des Divi-Themes zeigt in der Gitter- (oder Grid-)Ansicht eine fixe Anzahl Bilder nebeneinander an, die sich in den Einstellungen nicht beeinflussen lässt. Die Zahl der Spalten lässt sich dennoch beliebig ändern – mehr dazu im ...
Normalerweise wird im Blog-Modul des Divi-Themes nur der Titel, das Bild und (sofern vorhanden) der Read-More-Link mit einer Verknüfung auf den vollständigen Beitrag verlinkt. Das lässt sich aber soweit ändern, dass der gesamte Teaser mit dem ...
Das filterbare Portfolio-Modul des Divi-Themes beitet – neben allen anderen Filterbuttons – zusätzlich einen Button mit der Aufschrift «Alle», unter welchem sämtliche Posts angezeigt werden. Dieser «Alle»-Button lässt sich mit ein wenig CSS ...
Für Webprojekte verwenden Sie immer auch Farben – selbst dann, wenn es «nur» schwarz und weiss ist. Um meinem Farbkonzept treu zu bleiben und dennoch Nuancen zur Hand zu haben, habe ich mich auf die Suche nach Lösungen gemacht. Zwei patente ...
Keine Inhalte gefunden.
Werbung
