Joomla Templates Club 406,261 posts

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1054059

Hi
open /css/custom.css file and add below code to remove the mask

.acm-slideshow .owl-carousel .item .mask {
    background: transparent!important; }

Regards

[Jonathan Friend JonathanJoin date: February 2006Posts: 38Downloads:35Uploads:8]

#1054514

Thanks for that but it doesn’t seem to have any effect when I add this code into the custom.css file and upload it.
Can you suggest anything else?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1054595

Hi
Kindly share the URL of site and screenshot of the issue.
I will check it.

Regards

[Jonathan Friend JonathanJoin date: February 2006Posts: 38Downloads:35Uploads:8]

#1055629

Thank you.
The url is https://halcyondaze.com/bysclone/ and I have attached the screenshot as requested
JR

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1055739

Hi
Add this code in custom.css file to remove the mask

.acm-features.style-1 .features-item-inner .mask {
    background: none!important;

Regards

[Jonathan Friend JonathanJoin date: February 2006Posts: 38Downloads:35Uploads:8]

#1055997

Hi, I have added that update to the custom.css file and it still doesn’t work. Can you see the updated custom.css file updated at 11:58 on 12/08/2017?

.acm-features.style-1 .features-item-inner .mask
{
background: none!important;
}

Can you check the code is correct please?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1056072

Hi
I checked your site and it look like a syntax error in the first line of custom.css.
See this: http://prntscr.com/g7wvdo
The code is correct and should work.

Regards

[Jonathan Friend JonathanJoin date: February 2006Posts: 38Downloads:35Uploads:8]

#1057234

Thank you, there was in fact a extra character at the very beginning of the code. I had to go onto the web server using the edit function in File Manager to actually see it. Weird.
Having got this far, I have got rid of the opacity on the picture but the rollover effect that replaces the image with a solid colour has gone too.
Can you help with a modified css code that retains the solid colour on rollover?
That would be much appreciated.
JR

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1057395

Can you help with a modified css code that retains the solid colour on rollover?

Kindly share a screenshot which colour you want to modify with page URL.
I will check it.

Regards

[Jonathan Friend JonathanJoin date: February 2006Posts: 38Downloads:35Uploads:8]

#1057406

Hi the url is http://halcyondaze.com/bysclone/ and I’ve attached a screenshot with description as requested
The panel rollover colour should be the same dark blue colour as used in the header.
Thanks, JR 🙂

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1057503

Hi
Both the blocks use same style classes If you want to add the background again you can revert the changes.

Regards

[Jonathan Friend JonathanJoin date: February 2006Posts: 38Downloads:35Uploads:8]

#1057630

Hi, I think there is a bit of confusion about my request. I will try and clarify.
I know that both blocks are controlled by the same style classes, no problem there.

• I would like in the ‘original’ state to have no opacity, (for the image to be original, no mask. The code you supplied for insertion in custom.css works well to bring this change. )
• I would like in the ‘rollover’ state to have the solid colour, (like it is in the template demo before we applied the changes in the custom.css)

So I have the code to make the ‘original’ state no opacity but I need some additional css code to compliment this to bring back the solid colour effect on the ‘rollover’ state.
The code you supplied to get rid of the opacity in the original state also removes the solid colour from the rollover state.

Does that make sense?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1057742

Hi
Replace older code with this code

.acm-features.style-1 .features-item-inner:hover .mask {
    background: #222c54;
    opacity: 1!important;
    filter: alpha(opacity=100);
}
.acm-features.style-1 .features-item-inner .mask {
    opacity: 0!important;
}

Regards

[Jonathan Friend JonathanJoin date: February 2006Posts: 38Downloads:35Uploads:8]

#1058782

Thanks, that worked beautifully. Problem solved

Thanks again for your help.

JR

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1058814

You are welcome!

[Author]

Posts