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
Heute ein echter Quicktipp: Eine einzige Codezeile wird benötigt, um im Slider-Modul des Divi-Themes den Hintergrund zwar zu wechseln, den Text aber statisch beizubehalten.
Neulich hat uns ein Mail erreicht: Darin war die Frage enthalten, wie sich Texte als Prägung auf der Website darstellen lassen. Natürlich ist das mit einem Grafikprogramm schnell gemacht – aber noch eleganter lösen wir dies mittels CSS-Code.
Titeldarstellungen im Divi-Theme lassen sich hübsch gestalten. Heute zeigen wir Ihnen zwei Beispiele, wie Sie die Titelzeile mit einem Rahmen «auffüllen» können. Das ist ein echter Eyecatcher. Und ganz einfach zu machen.
Auf Artikelübersichten werden Beitragsbilder im Divi-Theme grundsätzlich im Format 400x284px angezeigt. Dies ist an sich OK, jedoch wünscht man sich das ab und an anders. Vielleicht möchte man die Bilder schmaler oder quadratisch darstellen. ...
Keine Inhalte gefunden.
Werbung
