Dark Hover Overly Color with diffrenet Product background

I have been searching the forum but I cannot find an answer for my particular issue. I thought post 9093 would help but it did work for me. I would like to use the hover effect but my products have a transparent background. I see that I can change the background color if I change .basel-hover-info .product-element-top class. However I do not want to change the hover overlay color. If I change the .basel-hover-info .product-element-top class to a background image how do I keep the overly as a opaque black? Thank you in advance.

Hello,

Thank you very much for choosing our theme and for contacting us.

Please provide your site URL. If your site is under maintenance please provide your site admin to the private area as well.

Best Regards

Please see the info below

Hello,

Now you have the black background on the product image in the grid and black color for the overlay https://gyazo.com/c6dfdbff7a017a699556168f06198b86

Please specify which color you want to change.

Best Regards

Elise

I would like to use this image https://www.neverloud.com/wp-content/uploads/2019/02/product-bg-comp.jpg as the product background on the archive page and the homepage. I would like to to keep the black overlay.

Thanks

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.home .website-wrapper {
    background-image: url((http://web.net/wp-content/uploads/dummy.jpg);
	background-repeat: no-repeat;
	background-size:cover;
}
.archive .website-wrapper {
    background-image: url(http://web.net/wp-content/uploads/dummy.jpg);
	background-repeat: no-repeat;
	background-size:cover;
}

Replace the image URL.

Best Regards

Elise

That did not work. I am looking to change my individual product backgrounds for the archive page and the WPBakery product grid. See the attached images.

Thanks again.

Attachments:

You must be logged in to view attached files.

Here is the other image.

Attachments:

You must be logged in to view attached files.

Hello,

This code would change the background on the individual product item in the grid http://prntscr.com/mqd5hs :

body .basel-hover-info .product-element-top {
    background-color: red;
}

This code will change the overlay color as well https://gyazo.com/06585c47f02990c94d68510335cfa845

Replace the color as per your needs.

Best Regards

Elise

I am sorry I guess I am not explaining myself very well. I understand where to change the background color per your last post and my original post. What I want to do is change the background to red like your example but I do not want the overlay to be red I want it it to be black. So one color for the background and different color for the overlay. Sorry for the confusion.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .basel-hover-info:hover .product-element-top {
    background-color: blue;
}

Best Regards

[Author]

Posts