Change featured image on hover?

CMS & WordPress
1

Hi,

I have a custom theme with featured images enabled.
The featured images are used on an overview page of all child pages as permalinks. I would like the featured images to change on hover.
The idea is to have a black&white image (default) and have it change to the full-colour version of the same image on hover.

Does anyone have a clue how to do this?
Any thoughts are greatly appreciated.

Cheers,
Michael

2

You could use something like jQuery to create a fancy fade-in or slide in effect, or you could do this simple with CSS in a number of ways—such as having the image as a background image sprite, so that on hover, another part of the image shows. It depends a bit on what exactly you want.

3

Ralph,
I understand the concept of css sprites, but how would I go about using that on dynamic content? The image is a featured image (thumbnail generated in functions.php). So it’s not a background image.

4

In that case, sprites are not an option. Anyhow, presumably this is not decorative content, meaning sprites are not appropriate anyway. You could create a hove effect, such that a colored version of the image is positioned off screen until the hover action, but really, you may just be better off using jQuery (or similar) for such an effect. What effect do you want exactly?

5

Hi,
Fixed it and you put me on track with the sprites, Ralph :slight_smile:
First I had the thumbnail generated from the large image. However, it was becoming a php nightmare with scripts making the image black&white and then removing the script on hover via jQuery (I couldn’t get it to work).
And then I got thinking about sprites :slight_smile: All I need is to tell the client to make an extra crop of his image for the thumbnail with the black/white and fullcolour side by side.
The thumbnail is 280px wide x 140 px high. I’ve placed the thumbnail in a 140pxx140px div. On hover it simply shifts the image 140px left to display the fullcolour image.

So after all sprites saved the day :slight_smile:

Thnx for thinking along, Ralph.

Cheers

6

Great, glad that helped. PHP isn’t my thing, so I wasn’t sure if it could be set up like that.

7

Hi Ralph,

I’m trying to do the same thing and create a CSS rollover for my featured images. Currently my featured image is sitting on top of my text and isn’t rolling over.

Below is my CSS:

.entry-thumbnail img {
height: 350px;
width: 900px;
margin: 10px;
float: left;
position: absolute;
/left: 800px;
top: 35px;/
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}

.entry-thumbnail img:hover {
background-position: 0px -350px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

Below is my the code in page.php - note the div in Red:

get_header(); ?>

<div id="primary" class="content-area">
	<div id="content" class="site-content" role="main">
		
		<?php /* The loop */ ?>
		<?php while ( have_posts() ) : the_post(); ?>

			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<header class="entry-header">
					<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
					[COLOR="#FF0000"]<div class="entry-thumbnail" class="entry-thumbnail img" class="entry-thumbnail img:hover">[/COLOR]
						<?php the_post_thumbnail(); ?>
					</div>
					<?php endif; ?>

					<h1 class="entry-title"><?php the_title(); ?></h1>
				</header><!-- .entry-header -->

				<div class="entry-content">
					<?php the_content(); ?>
					<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
				</div><!-- .entry-content -->

				<footer class="entry-meta">
					<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
				</footer><!-- .entry-meta -->
			</article><!-- #post -->

		<?php endwhile; ?>

	</div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>