Einige Divi-Module – etwa das Blog- oder Portfoliomodul – kennen den «Overlay»-Effekt: Beim Hovern über das dargestellte Beitragsbild wird dieses zum Beispiel von einer halb-transparenten Fläche bedeckt. Dieses Overlay lässt sich hübsch animieren. Wie’s geht, zeigen wir in diesem Hack.
Um den Effekt zu erzielen, müssen Sie im entsprechenden Blog-Modul oder Portfolio-Modul das Bild-Overlay aktivieren – im Divi-Theme ist das standardmässig gar schon der Fall.
Ferner benötigen Sie noch einen kurzen CSS-Code, den Sie im Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS – einfügen können:
.et_overlay {
-webkit-transform: scale(.6) rotate(-30deg);
-moz-transform: scale(.6) rotate(-30deg);
-o-transform: scale(.6) rotate(-30deg);
-ms-transform: scale(.6) rotate(-30deg);
transform: scale(.6) rotate(-30deg);
}
.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}Das Overlay wird jetzt nicht mehr einfach flächendeckend ein- und ausgeblendet, sondern vergrössert sich aus der Bildmitte und «dreht» sich über das Beitragsbild.
Werbung
Werbung
