WordPress.org

Support

Support » Plugins and Hacks » [Resolved] article.post-249 div.fpw-featured-image:hover help

[Resolved] article.post-249 div.fpw-featured-image:hover help

  • xdavidliux
    Member

    @xdavidliux

    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;
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Mark Root-Wiley
    Participant

    @mrwweb

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

    xdavidliux
    Member

    @xdavidliux

    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

    Plugin Author Mark Root-Wiley
    Participant

    @mrwweb

    Don’t sweat it. Glad I could help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] article.post-249 div.fpw-featured-image:hover help’ is closed to new replies.