Remove the Featured Pages Zoom effect


Note :This snippet works only with the Classical style option. More about the theme style option here


Last Reviewed: 2-May-15 (3.3.20) 3.1.* 3.2.* 3.3.*

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.

Remove the Zoom effect (Front Page) :

Featured pages unlimited user ? Then use this code (for version 1.15+)

More about the CSS transform property.

 

Remove the Zoom effect (Posts) :

Customizr introduced built-in feature changes in v3.3. Go to Customize>Content>Post lists. Adjust the THUMBNAILS OPTIONS FOR THE ALTERNATE THUMBNAILS LAYOUT settings. Also check the settings THUMBNAILS OPTIONS and POST LIST DESIGN.

PL0010_Thumbnails

3.1/3.2 code

Credit: @acub/@rdellconsulting
If you have set the Front Page to also be your Blog, then the code should change to:

Remove the Zoom effect (Front Page) on 3 Featured Images :

 

HELP! There’s a white rectangle where the Zoom used to be
Don’t panic, look at this Snippet.


Related Snippets you may also like


46 thoughts on “Remove the Featured Pages Zoom effect

  • Laurynas

    While changing some setting I have come to an understanding that the picture does not get placed in the effect zone. Instead effect zone stays white covering part of the picture. Do you know how to fix this?

  • Laurynas

    Hi there,
    Don’t know if this is the right place to ask, but I’ll try. Today I have installed Customizr theme and I like the overall performance. Main problem at the moment is that big part of the picture of featured page (on the front page) is covered by this white circle. I understand that you have posted a way to remove it, but I would like to know why is it there in the first place? Is it supposed to display anything? I am new to website building so I hope you won’t mind me asking.

    • Rocco Aliberti

      Hello you can use the method used for FPU so:
      .fpc-widget-front.hover .round-div {
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none;
      }

      but with .widget-front instead of .fpc-widget-front

  • David

    Ok. With a little tinkering I have arrived at this solution that seems to work but am I messing with forces I know little about?

  • David

    Hi Guys,

    When I apply the code that Dave suggests for FPU users, it removes the zoom effect but the image that remains is 170×170 not 270x250px that I had set as the Featured Image size. I notice that it zooms to 238 x 238px which is strange as well. I did have this working a few Customizr versions back but then there was an update to the theme and it no longer works.When I apply the code snippets without FPU enabled, it works.
    This was the post where I did make it work
    I will of course post this in the forum to cover all my bases.

    Thanks 🙂

    • David

      As luck would have it, I have stumbled upon a solution when i revisited my child theme’s style.css. I notice in this code that I had the image dimensions set to 170×170. I have changed them to 270×250 however, I no longer have rounded corners on two sides.
      This is the code in my stylesheet:

      /* hide the circular zoom, keep link */
      .home .round-div {
      border-color: transparent;
      }

      /*————————————*/
      /* ROUNDED CORNERS FOR FEATURED IMAGE */
      /*————————————*/

      .home .thumb-wrapper {
      border-radius: 8px;
      }

      .fpc-widget-front .round-div {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
      border: 104px solid #fff;
      border-radius: 110px;
      box-sizing: content-box;
      display: block;
      height: 270px;
      left: -54px;
      padding: 10 !important;
      position: absolute;
      top: -66px;
      transition: all 0.3s ease 0s;
      width: 250px;
      z-index: 99;
      }
      Feel free to delete this if I am cluttering up the forum… but can you suggest what I need to change so that all corners are rounded?

      Thanks

  • Jason

    I have an interesting question. Let’s say you like the zoom effect of the featured pages “feature image”. However, the ever-irritating IE9 browser will not do the transistioning when it’s screen resolution is in what would be considered desktop monitor size. However when I change the resolution to a mobile size the zoom transistioning begins to work again. What could I do to fix it where it does to the desktop versioin as well?

    • Nicolas

      Hi Jason, that’s actually an interesting point.
      After checking the IE 9 rendering, I have found that the modernizr related style .no-cssanimations .round-div {border:0} is active for desktop layout and is overriden by the media query (979px) for the .round-div selector.
      You can easily override the default theme style for .no-cssanimations .round-div with your own css. You might need to some specificity for the override to take effect.
      Thanks for pointing this out. I might improve this in the future release. It’s in the to do list.

  • Fabio

    Hello,

    I have set the featured images to be squared fro both the front page and posts. The problem is that I cannot manage to remove the zoom effect. Any suggestions.

    thanks

    • Fabio

      One more thing I noticed is that in the front page if I set to show something (atricle or page) then the zoom effect is removed, but if I decide I want nothing showed it doesn’t.

  • Maria

    the css code for the featured pages was:
    .widget-front
    after upgrading to version 1.8, the css code for the featured pages should be:
    .fpc-widget-front?

  • Zach

    Hey Dave,

    Thanks for all your help! I tried using the @media snippets you mentioned to remove the border from the featured images on my website on mobil. I used the code that works for my website on monitors to hide the code and put it in the @media snippets. It’s still showing the zoom on my featured images on mobile devices. Is there any way to remove the border globally, so as not to have to keep tinkering with it for different devices?

  • luca

    Hello, I would like to get pictures of the posts and pages, always a size as large as when zooming. The animation does not interest me. Thanks for your cooperation and your work! I’ll make another donation.
    The scale I set to 1 to turn off the animation but the image I would like to have it always as great as when zooming

  • jeroen

    /* hide the circular zoom, keep link */
    .blog .round-div {
    border-color: transparent;
    }

    this worked with me

    jeroen

  • Richie

    Hey,

    So, when I use the code to disable the “zoom” affect on posts, it removes my image completely.

    Is there a way to just make it so the full, unzoomed image shows with no zooming effect, without having to get rid of the image itself completely?

    Thank you.

    Richie

  • Lauren

    Hi there,
    Was wondering if it was possible to reduce the size of the feature box images. They are quite large and them when the zoom effect happens they get larger again. I have scanned the WP forum and this site, so i’m guessing it’s not possible, but i wanted to check. Would it be an option in the featured pages extention if i purchased that?
    thanks in advance for your help
    Lauren

  • Hugh

    Is there a way to make the zoom effect lager? Let me clarify: the zoom effect is the on-mouse-hover and icon appears lager, but really the icon is there the whole time and css border or something is coving it… well I want to thin that border when the mouse hovers. to show even more of the picture. (I have a picture where the corners are being cut off.)

    I also want to do the opposite, I want to have the closed state of the circle to be tighter. (To hide a portion of the image until mouse hover.)

    What CSS attributes will control this effect for the featured page images on the front page?

    • Dave Bardell Post author

      Sorry for delay Hugh. Did you fix this? If not, 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.

    • Nicolas

      Hi Iker, make sure you don’t have any plugins in conflict with the theme. Download the very last version of Customizr.
      If you still have issue. Report the problem in the user forum on WP.org.
      Hope this helps!

  • Jordi

    Hello Dave,

    is it possible to remove the featured pages’ zoom effect without removing it from the latest posts featuring in the front page?

    Thanks in advance!

    Jordi.

    • Dave Bardell Post author

      Not quite clear on what you want. Either remove from the 3 Front Page images (using .home prefix – that’s the 1st snippet) or from the Posts (using .blog prefix – that’s the 2nd snippet).

      • Jordi

        Hi Dave, and thanks for your response. If you take a look at this site http://www.laregadora.cat I mean if it’s possible to take the zoom out only from the 3 coloured spots (blue, orange, green spots) just under the slider, and not on the recent posts at the bottom of the front page. Thanks again!

  • Brian

    Hi Dave,

    I’ve tried using this bit of code in a child theme, to no avail:

    @media all and (max-width: 480px)
    {.round-div {border-color: transparent;}
    }

    For some reason at widths of 980+ the images do not have the circle, but anything less than that the circles appear. Is there a default somewhere I’m missing?

    Thanks!

    PS I’ve also posted this on the forum site

  • Brian

    How do you remove this effect for mobile browsers? I removed it from my site posts, but it still shows when I view the same posts on a mobile device. Any help would be greatly appreciated!

    • Dave Bardell Post author

      Most of these Snippets have been tested on Firefox, Chrome, Safari & IE. There are sometimes issues with IE versions <9 but in your case, 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.

  • richy

    Hi Dave, please sorry my fault…
    Your code now is working right for me 🙂

    The solution:
    Changing (moving some lines up) its position in child style.css file,
    Have a good weekend,

    Richy

  • Dave Bardell Post author

    “does not work” is a bit of a nightmare for me to understand – what doesn’t work, what is happening?

    Anyway, I’ve refined the code to take into account zoom effect on a) Front Page and b) Posts, which I hadn’t covered.

    I’ve tested it and it works on my test site for a), b) and a+b).

    Look at the properties I’ve used – do you make any other CSS changes to them anywhere which might be a conflict? Suggest you move to the Forum to discuss further.

  • richy

    Hi Dave,
    That code does not work… any further help, please?

    I don’t have the site online yet, sorry and thank you very much for your help,

    Richy

Comments are closed.