Support » Plugin: Feature A Page Widget » applying a a:hover featured image possible?

  • Resolved xdavidliux


    Hi it’s me again mrwweb,

    I am wondering if it’s possible to set a swappable image to a featured image.

    I can only think of going about it via CSS using a:hover (then swap image), however I couldn’t set a distinctive class to the featured image as they all have the same class. Or on mouseover?

    Usage: When someone hovers over the featured image link, I would like it to swap to another image (or even text).

    Perhaps I am missing something? Or maybe it’s not supported yet?

    Thank you very much!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Mark Root-Wiley


    Hi Dave,

    You should be able to target the image with CSS like this:

    .fpw-featured-image img { /* your styles */ }

    The hover state would be:
    a:hover .fpw-featured-image img { /* your styles */ }

    or (I think):

    .fpw-featured-image:hover { /* your styles */ }

    The link wraps both the title and image, so hovering on the title would also trigger the image hover state if you used that first hover code snippet.

    You could also write a bit of jQuery to do it if you actually want to change the image src but you’d need to consider the time it takes the image to load.

    If you want to get into more advanced editing, take a look at how to override the widget template in “How can I modify the widget design or output?” on the plugin’s FAQ page.

    To be honest, I doubt I’ll add this feature to the plugin anytime soon, but I think you should be able to do it with CSS/jQuery and/or editing the widget output template.

    Yes i am sure css targeting would be the most convenient method, but not when i have more than 1 featured-page image in a single page. I got 6 actually.

    Because it doesnt generate different names/class, targeting with css will affect all of them.

    I will do more research and share my findings tomorrow.

    Thank you.

    Plugin Author Mark Root-Wiley


    I see what you’re saying about the class. Most good themes setup the before_widget attribute of the sidebar to include a class, which gives you something like fpw_widget-5, but I’ll make a note to add a page-specific class in the next version so you’d get a class like fpw_widget-post-XXX to work with.

    Thank you for the information.

    I’m sorry to find out that the current theme I am using does not have a before_widget attribute.

    It will be great if this feature is included in future updates as it will help noob users like me take more advantage of this great plug-in!

    Thank you very much!

    Plugin Author Mark Root-Wiley


    HI @xdavidliux,

    I just checked in a version 1.1.1 of the plugin so watch for the update. It includes a full set of post_classes on the <article> element in the widget (as well as hAtom implementation). Hopefully that’s what you were looking for.

    The more I think about what you’re trying to do, I wonder if you want to check out Multiple Post Thumbnails. I don’t know how much you’ll be handing over the site to other editors, but setting up WP to use a second featured image as a hover state might be the easiest to manage, though of course it would require the most work to setup too 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘applying a a:hover featured image possible?’ is closed to new replies.