Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #1869441
Penci Image Box Background Opacity
Closed

Comments

  •  4
    ISOLE-GRECHE started the conversation
    January 25, 2019 at 5:01pm

    How is possible to have opacity for image box (Style 3) background? As you can see in image it cover too much image and I'd like to have it a lit bit trasparent.

    http://prntscr.com/mc3l18

  •  501
    Penci replied
    January 26, 2019 at 2:37am

    Hi,

    Please try go to Customize > Addtional CSS , then add custom css to do that

    .penci-image-box .penci-fea-in.boxes-style-3 .fea-box-img:before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        content: "";
        background: #000;
        opacity: 0.3;
    }

    you can change opacity  from 0 to 1 . Example 0.3


    Best Regards,

    PenciDesign


  •  4
    ISOLE-GRECHE replied
    January 26, 2019 at 4:11pm

    It had no effect!

  •  501
    Penci replied
    January 27, 2019 at 4:19am

    Hi,

    Please try with custom css

    .penci-image-box .penci-fea-in.boxes-style-3 .fea-box-img:before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        content: "";
        background: #000;
        opacity: 0.3;
        transition: all 0.3s;
    }

    // on hover

    .penci-image-box a:hover .penci-fea-in.boxes-style-3 .fea-box-img:before {
        opacity: 0.5;
    }

    You can change opacity to opacity any you want.


    Best Regards,

    PenciDesign


    Best Regards,

    PenciDesign


  •  4
    ISOLE-GRECHE replied
    January 27, 2019 at 9:38am

    The code has effect on photo background, not on text background. I explain better: I'd like to have text white background a little bit trasparent to see better the photo.

    I gave more opacity to let you understand the effect: http://prntscr.com/mcr942

  •  501
    Penci replied
    January 27, 2019 at 4:09pm

    Hi,

    Now, i understand.

    Please go to Customize > Addtional CSS, add custom code to do that 

    .penci-image-box .penci-fea-in.boxes-style-3 h4 span span:after {
    content: '';
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    opacity: 0.6;
}
.penci-image-box .penci-fea-in.boxes-style-3 h4 span span{
     background: transparent !important;
}

    you can change background color(  background: #fff;  ) and opacity (  opacity: 0.6; ) to any color and opacity.

    If it not work, please send me your website management information( admin url site, username and password ). I will check it help you.

    Best Regards,

    PenciDesign

  •  4
    ISOLE-GRECHE replied
    January 28, 2019 at 9:57am

    Perfect! Thanks!