Featured pages : Remove the White Squares from Zoom (Solid Background)


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Last Reviewed: 29-Mar-14

Having changed backgrounds on the Front Page, the Featured Pages images sometimes display with a white square around them.
If you need to remove the White Squares from Zoom:

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.


Related Snippets you may also like


15 thoughts on “Featured pages : Remove the White Squares from Zoom (Solid Background)

  • Lyubomir

    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.

  • Michael

    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.

    • Michael

      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;
      }

  • Dave Bardell Post author

    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…

    • Pete

      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.

  • Andre Rocha

    Doesn’t work. It removes the hover effect and the image becomes square. Still looking for a solution.

    Thanks anyway.

    • Dave Bardell Post author

      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.

  • RUne

    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.

  • Ryan

    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?

  • Hannah

    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.

  • Jibin

    I paste the above code in my custom css box, but the zoom effect disappears, also the featured image looks in square shape

    • Dave Bardell Post author

      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.

Comments are closed.