I am in the process of building a dynamic portfolio on WordPress and I need some help with a specific functionality. At the top of my page, I have a large banner image, followed by individual thumbnails of my work below. What I want to achieve is the ability to hover over these thumbnails and have them fade the header image into a larger version of the thumbnail, using the same image source.
The challenge arises from the fact that the page thumbnails are generated through cycling "portfolio" posts with featured images, meaning there are no direct relationships between the elements. This requires me to generate links dynamically using PHP code for the thumbs.
Initially, I explored the possibility of achieving this effect using CSS alone but realized it's not feasible due to the lack of parent or sibling connections between the elements. Do you think such a feature is possible? Would I need to implement JavaScript, despite my limited knowledge of the language compared to CSS/HTML?
You can view the website under construction here.
EDIT:
Below is the code snippet used to generate the thumbnails:
<?php
$query = new WP_Query(array('posts_per_page' => 6, 'meta_key' => '_thumbnail_id'));
while($query->have_posts()) :
$query->the_post(); ?>
<div class="portfolioThumbnail"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div><?php
endwhile;
?>
In essence, the structure of the site is as follows:
<div id="backgroundThatNeedsToChangeOnHover"></div>
<navigation></nav>
<div id="content">
<div class="portfolioThumbnail">
<a href="spawnedByPHP"><img src="spawnedByPHP" /></a>
</div>
<div class="portfolioThumbnail">
<a href="spawnedByPHP"><img src="spawnedByPHP" /></a>
</div>
<div class="portfolioThumbnail">
<a href="spawnedByPHP"><img src="spawnedByPHP" /></a>
</div>
</div>