Create an image overlay on rollover in SP Page Builder

by Dtorr1981   Last Updated May 10, 2019 12:10 PM

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.

Tags : joomla-3.x css


Related Questions