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 interessanter Animationseffekt: Texte werden quasi live am Monitor geschrieben. Dieser Typewritereffekt startet, sobald die Seite geladen wird. Sie benötigen bloss einige Zeilen CSS-Code - wir zeigen Ihnen alles weitere.
Im «Visuellen Builder» kann im Divi-Theme auch der Header und der Footer bearbeitet werden. Das ist eigentlich ganz praktisch – wer aber nicht genau weiss, was er/sie tut, kann auch ganz viel kaputt stylen. Sowohl Header als auch Footer lassen ...
Im Bild-Modul des Divi-Themes lassen sich ALT-Texte, welche etwa das abgebildete Bild in Worten beschreiben, problemlos erfassen. Ebenso die Title-Tags. Wer aber - und das tun sicher viele - Bilder direkt aus der Mediathek übernimmt, wird bald ...
Mit dem Divi-Theme können Sie einige der gängigsten SocialMedia-Symbole in die Kopf- und Fusszeile einfügen. Diese werden in einer festen Reihenfolge angezeigt. Sie haben aber die Möglichkeit, die Reihenfolge anzupassen – hier einige ...
Keine Inhalte gefunden.
Werbung
