Change Featured Pages Zoom Effect to Square


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: 11-Apr-15 (3.3.13) 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.

Customizr Pro contains features that replace this code snippet with easier Customise options. Take a look here.


Related Snippets you may also like


24 thoughts on “Change Featured Pages Zoom Effect to Square

  • April

    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

  • Cathy

    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.

  • Dave Bardell Post author

    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.

  • raynedejongh@ymail.com

    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

    • Dave Bardell Post author

      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.

      • Rayne de Jongh

        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:

  • Plymouth Web Team

    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

    • Dave Bardell Post author

      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.

  • Didier Sajno

    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

    • Dave Bardell Post author

      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.

      • Didier Sajno

        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

        • Rayne de Jongh

          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.

          • Didier Sajno

            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.

  • Alice

    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!

    • Dave Bardell Post author

      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.

  • Peter

    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.

Comments are closed.