WordPress.org

Ready to get started?Download WordPress

Forums

Feature A Page Widget
[resolved] article.post-249 div.fpw-featured-image:hover help (4 posts)

  1. xdavidliux
    Member
    Posted 1 year ago #

    Hi it's me again mrwweb,

    I just got around to tinkering with version 1.1.1 and have been trying to set up an image swap via CSS since this version gives me a post-class within <article> now.

    I am stuck at the image not swapping. I can see that the image:hover is happening but it's happening behind the featured image, which is ruining the whole point. Not sure if it's my CSS or the way the widget works, but I do know the featured image needs to be swapped during hover state:

    article.post-249 div.fpw-featured-image:hover {
    width: 150px;
    height: 150px;
    background: url(images/load.gif) no-repeat;
    }

    On another note, post-class within article allows me to do create a border on hover. Version 1.1.1 definitely extends the capability of your plug-in.

    Thank you for any advice or reference.
    Dave

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

    EDIT:

    I applied the following as well which made the image blink. So it's switching around between hover and non-hover state.

    article.post-249 div.fpw-featured-image img:hover {
      visibility:hidden;
    }
  2. mrwweb
    Member
    Plugin Author

    Posted 1 year ago #

    @xdavidliux, this isn't really an issue with the plugin anymore (I'm marking it resolved), but let me see if I can help. I'm glad you liked the 1.1.1 update. I rushed it for you :)

    Doing this with pure CSS isn't really ideal. It could be hard to maintain over time and there's no way to actually replace the image source with CSS. Like I said in the other thread, I would implement a second featured image field and then add it to the widget layout file and do the swap with css that way.

    If you have to do it with CSS, here's how I'd do it:

    .widget_fpw_widget .post-249 .fpw-featured-image {
        position:relative;
    }
    .widget_fpw_widget .post-249 .fpw-featured-image:after {
        display:none;
        content:' ';
        position:absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: green;
    }
    .widget_fpw_widget .fpw-featured-image:hover:after {
        display:block;
    }

    This is a proof of concept that just uses a solid-green box. I'll leave the image to you. Note that I just put something on top of the image rather than removing it (to work around the flickering issue you're seeing).

    Alternately, you could do a bit of jQuery. I think this might actually be a bit better than the CSS solution for its concision, better browser support, and js-appropriateness overall (it's an interaction, not a style). Here's a proof of concept, though you might need to tweak the newsrc attribute:

    $widget = $('.widget_fpw_widget .post-249 .wp-post-image');
    $widget.data( 'img-swap',
    	{
    		newsrc: 'images/load.gif',
    		original: $widget.attr('src')
    	}
    );
    $widget.hover(
        function() {
    	$(this).attr( 'src', $(this).data('img-swap').newsrc );
        },
        function() {
            $(this).attr( 'src', $(this).data('img-swap').original );
        }
    );

    Good luck.

  3. xdavidliux
    Member
    Posted 1 year ago #

    Mrwweb,

    I apologize and should've posted in the regular members' forum.

    Thank you for going out of your way to help me out. I really appreciate it and can't thank you enough.

    Cheers!
    Dave

  4. mrwweb
    Member
    Plugin Author

    Posted 1 year ago #

    Don't sweat it. Glad I could help!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic