Skip to content
Public Ticket #11321

Featured slider overlay

Conversation thread

aszakallas replied

6 years ago
Customer Reply

Thank you! You're the best.

Penci Design replied

6 years ago
Staff Reply

Hi,

Please try fo to Customizer > Addtional CSS then add custom css to do that

.penci-block_29 .block_29_first_items .penci_post_content:before{
 position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #000;
    opacity: 0.5;
    content: '';
    z-index: 1;
    -webkit-transition: opacity .4s ease 0s;
    -moz-transition: opacity .4s ease 0s;
    -o-transition: opacity .4s ease 0s;
    transition: opacity .4s ease 0s;
}
.penci-block_29 .block_29_first_items .penci_post_content > div,
.penci-block_29 .block_29_first_items .penci_post_content > h3{
 position: relative;
 z-index: 10;
}
.penci-block_29 .block_29_first_items .penci-post-item:hover .penci_post_content:before {
    opacity: .7;
}

Best Regards,
PenciDesign

aszakallas replied

6 years ago
Customer Reply

There is one more news box on the home page that didn't change the style. How do I apply this to the Penci Block 29? screenshot attached. Thanks.

aszakallas replied

6 years ago
Customer Reply

Thank you very much, that worked perfectly.

Penci Design replied

6 years ago
Staff Reply

Hi,

Please go to  Customizer > Addtional CSS then add custom css to do that

.penci-featured-content .penci-slider__text:before{
 position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #000;
    opacity: 0.5;
    content: '';
    z-index: 1;
    -webkit-transition: opacity .4s ease 0s;
    -moz-transition: opacity .4s ease 0s;
    -o-transition: opacity .4s ease 0s;
    transition: opacity .4s ease 0s;
}
.penci-featured-content .penci-slider__text > div,
.penci-featured-content .penci-slider__text > h3{
 position: relative;
 z-index: 10;
}
.penci-owl-featured-area .penci-item-mag:hover .penci-featured-content .penci-slider__text:before {
    opacity: .7;
}
.penci-owl-featured-area .penci-item-mag.penci-gradient:not(.penci-image-holder):after {
    content: none !important;
}

Best Regards.

PenciDesign

Want to join this conversation or access attachments? Sign in first.

Login to Reply