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.
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) :
/* START OF Remove the Featured Pages Zoom effect */
/* hide the circular zoom, keep link */
.home .round-div {
border-color: transparent;
}
/* hide the 270 x 250 square image - OPTIONAL */
.home .thumb-wrapper {
display: none;
}
/* END OF Remove the Featured Pages Zoom effect */
Featured pages unlimited user ? Then use this code (for version 1.15+)
/* START OF Remove the Featured Pages Zoom effect */
.fpc-widget-front.hover .round-div {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
/* END OF Remove the Featured Pages Zoom effect */
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.
3.1/3.2 code
/* START OF Remove the Featured Pages Zoom effect */
/* hide the circular zoom, keep link */
.post .round-div {
border-color: transparent;
}
/* hide the 270 x 250 square image - OPTIONAL */
.post .thumb-wrapper {
display: none;
}
/* Reset Post position/width - OPTIONAL */
.post .tc-content {
margin-left: 0px;
min-width: 100%;
}
/* END OF Remove the Featured Pages Zoom effect */
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 :
/* START OF Remove the Featured Pages Zoom effect */
/* hide the circular zoom, keep link */
.home .widget-front .round-div {
border-color: transparent;
}
/* END OF Remove the Featured Pages Zoom effect */
HELP! There’s a white rectangle where the Zoom used to be
Don’t panic, look at this Snippet.
47 thoughts on “Remove the Featured Pages Zoom effect”
how about the other way around? I am not sure what happend to my zoom effect in Genesis child theme. Featured images for posts on my front page stopped functioning.
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?
Hi, please open a new thread in the forum about this : https://wordpress.org/support/theme/customizr
Thanks 🙂
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.
Also posted to forum, wondering if you may have insight.
https://wordpress.org/support/topic/round-divdisplaynone-removes-link-from-feature-image?replies=1
I am trying to disable round and zoom from the feature images. .round-div{display:none;} works great, but then it removes the link form the image. How can I accomplish the same thing, while preserving the link directly from the image?
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`
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?
.fpc-widget-front .round-div { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; border: 2px none transparent; border-radius: 270px; box-sizing: content-box; display: block; height: 270px; left: 5px; padding: 10 !important; position: absolute; top: -66px; transition: all 0.3s ease 0s; width: 250px; z-index: 99; }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 🙂
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
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?
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.
Hello! this was my solution:
.round-div {
border: none;
}
hope it helps.
.round-div {
border-color: transparent;
}
this option its better cuz the image will still be clickable.
Hi Carlos,
Thanks for sharing those tips. One warning about transparency tough, since it is not supported by all browsers, you’ll have to add some fallback in your CSS code as stated in this article.
Best and enjoy the theme!
Thank you so so so so so so so so so much =p
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
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.
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?
Yes, absolutely right.
This has been fixed in the latest version of Featured pages Unlimited plugin, and is compliant with WordPress Font Customizer plugin.
Thanks
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?
I’ve just fixed an issue where .blog has been deprecated and replaced it with .post.
This may fix your issue?
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
/* hide the circular zoom, keep link */
.blog .round-div {
border-color: transparent;
}
this worked with me
jeroen
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
Richie, 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.
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
Hi Lauren, did you take a look at this snippet : http://www.presscustomizr.com/snippet/disable-the-reveal-hover-effect-on-images-in-customizr/ ?
The default scale is set to 1.4 but you can set it to less than that to reduce the size.
Cheers
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?
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.
hello, can you help me pls.. im in turkey.. this theme very very good. very very tanks..
but display to excerpt not see in my post :(..
i install this theme.. then display to excerpt … no problem.. but old post not see display to excerpt:(
pls help me.. url: http://www.ilkerfm.net old post: http://www.ilkerfm.net/page/3/ thanks
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!
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.
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).
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!
OK, I see the problem. I’ve updated the Snippet above to handle 3 Featured Images AND Blog on the Front Page. It stops the Zoom only on the 3 Featured Images.
That’s exactly what we wanted, thanks a lot Dave!
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
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.
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!
Hi Brian, you need to use @media statements in your CSS. Try reading this Snippet for details.
Hi Dave,
Thanks! Would I need to add the code for every size?
It works on internet explorer but not firefox, what could that be?
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.
Thanks!
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
“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.
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