Trick # 514 | Dieser Beitrag beinhaltet 399 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.
Bilder lassen sich ganz einfach mit einem Glanz-Effekt versehen, sobald der Mauszeiger über das Bild bewegt wird. Dieser Hover-Effekt wird mit ein wenig CSS-Code erzielt.
Vergeben Sie dem betreffenden Bild eine CSS-Klasse – in unserem Falle heisst diese «shiny-image». Sofern Sie das Divy-Theme verwenden fügen Sie diese Klasse im Tab «Erweitert» des betreffenden Bildmoduls unter «CSS-ID und Klassen» im Textfeld «CSS-Klasse» ein.
Sie benötigen ferner folgenden Codeblock, den Sie in das Stylesheet Ihrer Website einbauen – auf einer WordPress-Website unter Design/Customizer/Zusätzliches CSS:
.shiny-image img {
-webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
-webkit-mask-size: 800%;
mask-size: 800%;
-webkit-mask-position: 0;
mask-position: 0;
}
.shiny-image img:hover {
transition: mask-position 2s ease,-webkit-mask-position 2s ease;
-webkit-mask-position: 120%;
mask-position: 120%;
opacity: 1;
}Den Effekt sehen Sie, wenn Sie den Mauszeiger über das Bild nebenan bewegen:
Werbung
Werbung
