Lesefortschritt:

Bilder in Beitragsübersichten mit einem Graustufen-Hover-Effekt versehen

18. Juni 2025 | CSS-Stylesheet, Divi-Theme

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

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.