cocosua88

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

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(); ?>

Here is the dev link: https://www.suakang.net/dev/
Please let me know if I’m missing any information to resolve this.
Thank you very much!