it-swarm.com.de

Erstellen Sie beim Rollover in SP Page Builder) eine Bildüberlagerung

Ich versuche, einen Rollover-Effekt zu erzeugen, wie zu sehen ist hier , aber ich kämpfe darum, wie ich es am besten machen kann. Der Client hat angefordert, dass die Site mit SP Page Builder) erstellt wird, da er sie selbst warten und aktualisieren möchte, was einige Probleme verursacht.

Der Block, auf den ich diesen Effekt haben möchte, ist zu sehen hier , aber ich habe Probleme mit den richtigen Effekten, die dies bewirken. Ich habe der ersten 'Daten'-Box eine CSS-Klasse namens Rollbox hinzugefügt, aber der Effekt scheint eher unten als oben aufzutreten.

/** Pod box effect on mouseover **/
.rollbox a{
    display:inline-block;
    position:relative;
}
.rollbox a>span{
    position:relative;
}

.rollbox::before{
    content:'';
    background:rgba(0,0,0,0.8);
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0%;
    -webkit-transition:width .3s ease-out;
}
.rollbox:hover::before{
    width:100%;
}

Alle Hinweise wäre sehr dankbar. Danke im Voraus.

1
Dtorr1981

Am Ende habe ich den Seitenersteller aktualisiert und eine Addon-Überschreibung für das neue Image Overlay-Addon erstellt. Dadurch konnte ich tun, was ich tun musste.

0
Dtorr1981

Fügen Sie für das aktuelle Markup und mit dem vorhandenen CSS dieses zusätzliche CSS hinzu, und Sie kommen dem gewünschten Effekt näher.

.sppb-text-center {
    position: relative;
    overflow: hidden;
}
.rollbox:hover::before {
    width: 100%;
    z-index: 99999;
    display: block;
}

Ein paar Anmerkungen zu dieser Art von Fragen:

  • Dies ist keine Joomla-Frage.
  • Das ist sehr spezifisch und eher so, als ob ich jemanden brauche, der die Arbeit für mich erledigt.
1
FFrewin