1

I am trying to create a rollover effect as can be seen here but am struggling as to the best way to do it. The client has requested that the site be built using SP Page builder as they want to maintain and update it themselves which is causing some issues.

The block I am looking to have this effect on can be seen here but I am struggling with the correct effects that will create this. I have added a css class called rollbox to the first 'Data' box but the effect seems to be occurring underneath rather than on top.

/** 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%;
}

Any pointers would be most appreciated. Thank you in advance.

1
+50

For the current mark-up and with the CSS you have in place, add this extra CSS and you will get closer to the effect that you want.

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

A few notes for this kind of questions:

  • This is not a Joomla question.
  • This is very specific and more like I need someone to do the work for me.
0

In the end I upgraded the page builder and created an Addon Override for the new Image Overlay addon. This then allowed me to do what I needed to do.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.