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

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

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

Don’t sweat it. Glad I could help!