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.
/* START OF Change Featured Pages Zoom Effect to Square */
.round-div {
border-radius: 0;
}
/* END OF Change Featured Pages Zoom Effect to Square */
Customizr Pro contains features that replace this code snippet with easier Customise options. Take a look here.
24 thoughts on “Change Featured Pages Zoom Effect to Square”
Thanks to @d4z for pointing out the extra code not needed making this the simplest of Snippets!
Hi Dave,
I’m trying to fix a problem with the feature buttons on the front page. As the circles aren’t a whole circle…. Could you please take a look at it? I tried to scale the images down to 270/250 but it will still look like half circles.
April
Check your Images again April. They’re 300×199 so won’t work as 270×250 will.
Dave, this is the easiest thing I have customized to date. I simply copied and pasted where you said and it worked. Thank you so much for sharing this code with all of us.
Sorry for not responding sooner and for this standard reply:
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 important, please include a link to your Site.
Oh, and while I am at it, I would also like to change the hight of my slider. I was able to change it but the transparent box in the slider would not change and the button was not showing because it was outside of the slider area. Any help on this issue possible?
Thanks!
Hi there!
First of all I must say that I love this theme. I actually don´t have a clue on css or html but thanks to the customizr theme and all the great help in the forum I find it very easy to change the design of my page. I am getting close to the website I want to create. Thanks to all of you!
I would like to get rid of the zoom effect on my FP and change the image from round to square. I´ve tried all the codes mentioned in this post but it won´t work. I can see the outlines of the square but I can´t get rid of the zoom and the round images. Can anyone give me the right sippet? Where is my mistake?
This is how my child theme looks at the moment:
Version: 1.0
Description: A child theme of Customizr
Template: customizr
*/
@import url(“../customizr/style.css”);
.home .round-div {
border-color: transparent;
}
.home .thumb-wrapper {
border-radius: 8px;
}
.widget-front.hover .round-div, article.hover .round-div {
transform: scale(1.06);
}
.round-div {
display: block;
transition: all 0s ease 0s;
position: absolute;
width: 250px;
height: 270px;
z-index: 99;
border-radius: 900px;
border: 90px solid #FAFAFA;
top: -66px;
left: -54px;
}
Hi there…This worked beautifully. I would however like to give the square a border-radius of about 5px. Could you possibly help me with this as when I tried adding 5px to the border radius there is no change.
Appreciate the help
Understandably, you’ve misinterpreted the border-radius selector. That’s used typically to provide rounded corners to square/rectangle objects. 6px/15px are seen most often. Using 0px is what has created the square border.
What you’re trying to achieve is not achievable, because the 104px is the border being used to create the zoom, so you can’t set a border of a border.
Hi there:)
Thanks for getting back to me, in the meantime, I did manage to get the rounded corner effect that i wanted and though for anyone else who would like this effect (minus the hover animation) here is what I used:
/*------------------------------------*/ /*REMOVES FEATURED PAGES SCALE*/ /*------------------------------------*/ /* hide the circular zoom, keep link */ .home .round-div { border-color: transparent; } /*------------------------------------*/ /* ROUNDED CORNERS FOR FEATURED IMAGE */ /*------------------------------------*/ .home .thumb-wrapper { border-radius: 8px; }Rayne,
I have been searching for this solution since I started using Customizr. Many, many thanks. It will look great when the site is launched.
Dave
You are welcome, enjoy the theme Dave!
It would be sweet’ if the Zoom Effect had rounded corners (but not a circle completely)
Hi
Is it possible to remove the featured image option completely from the homepage?
For example, adding an image from the gallery to a post is fine – we want that. But don’t want the image to appear on the homepage. At the moment the post title, decription and image appears in the circle.
Is there a ‘hide featured image on homepage’ part of the CSS / PHP that can be alerted?
Thanks
Did you mean the 3 Featured Circles? If so, look under Customiz’it!>Front Page and under Featured pages layout, untick the SHow images checkbox.
Otherwise, 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 Dave,
I’ve tried to increase the size of the visible circles, with success, however on the hover the border expands to far out revealing edges of the picture. Which css rule do I need to adjust?
Thank you
Sorry for not responding sooner and for this standard reply:
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 Dave,
all I need is the name of the rule… I’ve tried .round-div:hover but that didn’t work, any idea (apart trying the forum)?
Thanks
.widget-front.hover .round-div, article.hover .round-div { transform: scale(1.06); } .round-div { display: block; transition: all 0.3s ease 0s; position: absolute; width: 210px; height: 210px; z-index: 99; border-radius: 900px; border: 90px solid #FAFAFA; top: -66px; left: -54px; }Hi there Didier Sajno, this is what I suggest, it’s a combination of a few elements that need to change together. try changing it to suit your needs… but you will need to change:
transform: scale(1.06); (originally 1.4)
width: 210px; (originally 170px)
height: 210px; (originally 170px)
border: 90px solid #FAFAFA; (originally 104px)
hope it helps.
Thanks Rayne for your help, getting there, but not great results here, there is a wobble at the end of the transition that is not very clean. Thanks for your time.
Hi Dave. I used this code and it worked perfectly on PC, but when I view my page on mobile, there are grey boxes around the feature page images. Any help would be appreciated. Thanks for all you do!
Alice, sorry for delay in responding.
Just retested and all is OK on my basic install, so must be something in your css causing it. 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.
Same issue here, I have posted a thread in the forum
Sweet Dave 🙂 Thanks for this.
I’ve just done this on a test site and works beautifully with the Featured Pages Unlimited extension.
Cheers’
Peter.