WordPress.org

Ready to get started?Download WordPress

Forums

Feature A Page Widget
[resolved] applying a a:hover featured image possible? (6 posts)

  1. xdavidliux
    Member
    Posted 1 year ago #

    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!
    Dave

    http://wordpress.org/extend/plugins/feature-a-page-widget/

  2. mrwweb
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. xdavidliux
    Member
    Posted 1 year ago #

    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.
    Dave

  4. mrwweb
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  5. xdavidliux
    Member
    Posted 1 year ago #

    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!
    Dave

  6. mrwweb
    Member
    Plugin Author

    Posted 1 year ago #

    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 :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic