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
Je nach Grösse Ihrer Anzeige und je nach Umfang des Menüs Ihrer Website kann es vorkommen, dass das Menü auf kleineren Monitoren zweizeilig dargestellt wird. Das ist natürlich unschön und wir versuchen es zu verhindern. Hier ein Hack, der helfen kann.
Vielleicht möchten Sie in der Desktop-Ansicht ein anderes Website-Logo zeigen als in der Mobilansicht? Zum Beispiel eines ohne Claim, weil dieser auf Mobilgeräten eh nicht gut lesbar ist? Nichts leichter als das.
Wenn Sie eine neue Website aufbauen werden Sie zweifelsohne oft im CSS-Stylesheet unterwegs sein und Anpassungen vornehmen. Praktisch wäre es, wenn Sie da eine Übersichtsseite mit den gängigsten Darstellungen hätten. So sehen Sie am besten, wie ...
Das Divi-Theme wird mit einem Blog-Modul geliefert, mit dem Sie eine Liste von Beiträgen an beliebiger Stelle auf Ihrer Website anzeigen können – komplett mit einem Bild, einem Auszug und einer Schaltfläche, um weiterzulesen. Wenn Sie noch eine ...
Keine Inhalte gefunden.
Werbung
