Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
.round-div {
border-color: #000000; /* Change #000000 to background-color */
} 
If you want your featured pages titles be a link to the featured pages, this snippet is what you need. You do […]
If you want to have the post metas of your single posts displayed before the title and not after the title, add […]
Where to copy/paste this code? The simplest way is to use the Custom CSS section of the customizer option screen. If you […]
Let’s say you’ve setup three beautiful featured pages on your home page. Now you might want to display this block of featured pages in another […]
By continuing to use this site you consent to the use of cookies in accordance with our cookie policy.
15 thoughts on “Featured pages : Remove the White Squares from Zoom (Solid Background)”
When the Front Page (not the featured page) background is a pattern and not a solid color then how to proceed? I tried to set the background color of the featured page transparent but then I only see the full-sized square images behind the zoom. Is there a way the area outside the zoom to assume the same Front Page background pattern or perhaps the area of the image that the zoom covers to become somehow transparent? I am open for any suggestions.
Works well on the site I am creating however does not seem to work on mobile browsers.
I guess its just another tag I have to add in the css, however I ‘m not sure which tag and it probably worth adding it to the above code once found.
I found the additional tag to edit to make the white squared go when looking at it in a mobile browser.
.widget-front .round-div {
border: 94px solid #000000;
}
The original Snippet does not work with a background-image. Have changed to work with a solid Background.
Still looking for a solution for background-image…
Hi Dave, and thank you for all your hard work….much appreciated.
Did you manage to find a solution in placing a background image around the zoom circles for the featured page?
Cheers, Pete.
Doesn’t work. It removes the hover effect and the image becomes square. Still looking for a solution.
Thanks anyway.
I think your point is that it doesn’t work on your site. Most of these Snippets are tested standalone, so it is possible that when added to other CSS code they don’t work quite as intended.
I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
Just what I was looking for!
Thanks a bunch!
As I am not using a background image but rather just changed the background color, I specified the border-color as Identical to my background color. That way, I overcome the issue described in the first 2 posts.
That’s what I do too!
Thanks for using Customizr.
What about if I wanted to make the featured pages area size smaller?
I am having difficulty finding how to do that.
I found how to make the slider smaller.
/*Slider size*/
.carousel .item {
line-height: 300px;
overflow: hidden;
min-height: 300px;
}
Is it something similar?
I’d suggest the Forum would be a better place to get a solution for this, and include a link to your Site.
Thanks for using Customizr.
Is there a way of doing this for featured images on the blog page? I’ve altered the background colour to white, but the images still have a grey box around them.
Same as above, I’d suggest the Forum would be a better place to get a solution for this, and include a link to your Site.
Thanks for using Customizr.
I paste the above code in my custom css box, but the zoom effect disappears, also the featured image looks in square shape
Most of these Snippets are tested standalone, so it is possible that when added to other CSS code they don’t work quite as intended. I’d suggest the Forum would be a better place to get a solution for this, and include a link to your Site.
Thanks for using Customizr.