Changing tranparency level on header images

Hi,

I am trying to override the level of dark shade on header images and make it lighter. I read in other parts of forum that it can be done with adding the following to the CSS override. But it did not work. Any ideas?

Code: Select all

.gkNspPM-TitleOverlay:hover .gkImgOverlay {opacity:0;}

Thanks,
M.

Hello,

Please try to add under advanced template settings in the Custom CSS code option the following code:

Code: Select all

.gkNspPM-NewNewsHeader .gkImageArea:after {
   opacity: 0.25;
}


Hi,
That override worked perfectly.
But as some of the images maybe having a white background, using this did not fully resolve my problem. Is there any possible way to have a dark layout that has a darker bottom and a more lighter top? (Please see an example from BBC dot com - Screenshot below.) I don't have the knowledge to say whether it is a blended image or this layout is purely code. If this layer is an image on BBC then it will give me the ability to go creative and create the best possible combination of dark and light. If it's only code then I would be grateful if you could help me how to recreate it.)
Many thanks,
M.

So in this case instead of the opacity you have to set a gradient as a background for the mentioned element.

Please use tool like http://www.colorzilla.com/gradient-editor/ to create a gradient code.

Hi,

I created the gradient effect using the link you kindly provided (first code box). I could find the part regarding the same effect in CSS files but linear-gradient is different and I can't quite understand how to convert mine into the same that I found on template (2nd code box). I'd appreciate it if you could help on this.

Code: Select all

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4f4f4f+0,bababa+19,d3d3d3+43,d3d3d3+72,000000+100 */
background: #4f4f4f; /* Old browsers */
background: -moz-linear-gradient(top,  #4f4f4f 0%, #bababa 19%, #d3d3d3 43%, #d3d3d3 72%, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #4f4f4f 0%,#bababa 19%,#d3d3d3 43%,#d3d3d3 72%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #4f4f4f 0%,#bababa 19%,#d3d3d3 43%,#d3d3d3 72%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#000000',GradientType=0 ); /* IE6-9 */


Code: Select all

.gkNspPM-NewNewsHeader .gkImageArea::after {
    background: rgba(0, 0, 0, 0) linear-gradient(5deg, #002f4b, #000) repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease-out 0s;
}

Thanks,
M.

Please try the following code:

Code: Select all

.gkNspPM-NewNewsHeader .gkImageArea:after {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4f4f4f+0,bababa+19,d3d3d3+43,d3d3d3+72,000000+100 */
    background: #4f4f4f; /* Old browsers */
    background: -moz-linear-gradient(top,  #4f4f4f 0%, #bababa 19%, #d3d3d3 43%, #d3d3d3 72%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #4f4f4f 0%,#bababa 19%,#d3d3d3 43%,#d3d3d3 72%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #4f4f4f 0%,#bababa 19%,#d3d3d3 43%,#d3d3d3 72%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease-out 0s;
}

Dear Tidy,

It worked perfectly.
I leave the gradient effect CSS code which I used in CSS Overrides of template and resulted in a nice looking outcome here in case it helps anyone else.

Code: Select all

 .gkNspPM-NewNewsHeader .gkImageArea:after {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+96,000000+100&0.65+0,0+22,0+61,0.65+81,1+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 61%, rgba(0,0,0,0.65) 81%, rgba(0,0,0,0.93) 96%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 61%,rgba(0,0,0,0.65) 81%,rgba(0,0,0,0.93) 96%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 61%,rgba(0,0,0,0.65) 81%,rgba(0,0,0,0.93) 96%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

        bottom: 0;
        content: "";
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
        transition: all 0.3s ease-out 0s;
    }

Thanks for the help once more,
M.