Fade In/out background featured image when mouseover the title link.

Hi @cocosua88,

Looks like you are almost there. Your loop code is fine and pulls in each featured image for each post.

However you currently don’t have anything in place that links a menu item with an image and any way there after of animating the change.

So from what I can see you need to first of all link the corresponding menu item to it’s image. This could be done using an iterator variable (i++) which is echoed as an id on each menu and image as they are looped or maybe you could utilise the post_id?

You will probably have to use a bit of Javascript to control the hover animation. So when menu with ID 2 is hovered change background to ID 2. You might be able to use CSS but maybe only with a bit of structural change on your page so you can use the “+” adjacent sibling combinator in CSS.

Hope that helps

Hi cocosua88,

Check this code.
Also, this one.

Thank you so so much for all the help @wptweaks & @nisha!

I used.hover() function to toggle ‘.active’ class on ‘.image-container’ class when I hover over the list menu. Then, I used CSS opacity to fade in/out.

The issue I’m still having though is that the page displays all the thumbnail images instead of just one corresponding one. With my lack of knowledge, I just can’t work around the iterator variable to display correctly. Could you please elaborate on the iterator variable or guide me with more example?

Here is the dev site where I’m right now: https://www.suakang.net/dev/
Thank you agin!

<?php
/**
 * Front Page Template
 * Lists project categories with featured project
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
			<section class="column-left">
				<div class="site-info">
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
						<h1 class="site-title"><?php bloginfo( 'name' ); ?><span class="site-subtitle"> <?php bloginfo('description'); ?></span></h1>
					</a>
				</div>

				<article class="bio">
					<p class="bio-description">
					<?php the_content() ?>
					</p>
				</article>

				<article class="project-list">
					<ul class="project-title image-switch">
						<?php 

							$args = array(
								'post_type' => 'project',
							);

							$postProject = new WP_Query( $args );

							// The Loop
							while ( $postProject->have_posts() ) : $postProject->the_post();
								?>

								<li class="project-title-list"><a href="<?php echo get_permalink( $post->ID ); ?>"<?php post_class(); ?>><?php the_title(); ?></a></li>								<?php
							endwhile;

							// Reset Post Data
							wp_reset_postdata();
						?>
					</ul>
				</article> <!-- .project-list -->
			</section>

			<aside class="column-right">
				<div class="preview">

				<?php 

					$args = array(
						'post_type' => 'project',
					);

					$postProject = new WP_Query( $args );

					// The Loop
					while ( $postProject->have_posts() ) : $postProject->the_post();
						?>

							<?php if ( has_post_thumbnail() ) : ?>
								<div <?php post_class('post-thumbnail project-image image-container animated fadeIn'); ?>>
										<div class="b-to-load">

											<?php
											$post_thumbnail_id = get_post_thumbnail_id( $post->ID );
											if ( $post_thumbnail_id ) : ?>
												<?php
												$post_thumbnail_medium = wp_get_attachment_image_src($post_thumbnail_id, 'medium');
												$post_thumbnail_large = wp_get_attachment_image_src($post_thumbnail_id, 'large');
												$post_thumbnail_large_2x = wp_get_attachment_image_src($post_thumbnail_id, 'large_2x');
												?>

										    		<img class="cover" src="<?php echo $post_thumbnail_large_2x[0]; ?>" alt="">
										    <?php endif ?>
										    </div>
								    </div>

							<?php endif; ?>

						<?php
					endwhile;

					// Reset Post Data
					wp_reset_postdata();
				?>
				</div>
			</aside>

			<script type="text/javascript">
			jQuery(document).ready(function($){
			$("ul.project-title li a").hover(function () {
			    $(".image-container").toggleClass("active");
			 });
			  var body = $( 'body' );
			});
			</script>

		</main><!-- .site-main -->
	</div><!-- .content-area -->

<?php get_footer(); ?>

Hi again,

OK so you are using the post_class so each menu item and image container has a correlating ID that is different from the others. I think the easiest way is just to use this in the JS to display different image containers. Hopefully this works:

<script type="text/javascript">
jQuery(document).ready(function($){
$("ul.project-title li a.post-xx").hover( function() { $(".image-container.post-xx").toggle(); } );
$("ul.project-title li a.post-xx").hover( function() { $(".image-container.post-xx").toggle(); } );
$("ul.project-title li a.post-xx").hover( function() { $(".image-container.post-xx").toggle(); } );
$("ul.project-title li a.post-xx").hover( function() { $(".image-container.post-xx").toggle(); } );
</script>

So obviously replace the “xx” with you post ID’s making sure to match the menu ID and image container ID match. Create a hover function for each menu item.image container.

There is a more future proof way of using a loop in the Jquery code to loop through all your post id’s but it’s getting more complex and this should get you started at least.

My gosh! you’re my lifesaver. It worked like a charm. REAALLY appreciate your help!

Nae problemo. Glad it works. Like I said if I was trying to future proof it a bit and be extra clever then looping through stuff and adding it dynamically to the JS would be good but perhaps not necessary.