Changing Image+text on hover

The CMS Questions
1

Hey there I just started with Kirby.
So, I have a two column layout. Left is a list of links (projects) and on the right there is a big project thumbnail with text over it. When I am hovering on a link on the left, the thumbnail and text is changing.

The list is working fine with:
<?php foreach($page->children()->visible()->flip() as $project): ?>

But for any reason the right content is the same on every link and it seems that two projects are over eachother and two of the project title are shown on the big thumbnail.

My question is how i can trigger only one big thumbnail while hovering on one link on the left?

Thanks for any help

2

This is not really a Kirby thing. How have you implemented this thumbnail change? Please provide some additional information and code, and maybe some images.

3

Thanks for your answer I’ve build it like this:

List (left):

<div class="project-list">
    	<div class="table">
    		<div class="table-row">
    			<div class="cell-project">Project</div>
    			div class="cell-category">Category</div>
    		</div>
    	<?php foreach($page->children()->visible()->flip() as $project): ?>
    		 <a class="table-row preview" href="<?php echo $project->url() ?>">
    			  <div class="cell-project"><h2><?php echo $project->title()->html()?></h2></div>
    			  <div class="cell-category"><?php echo $project->category()->html()?></div>
    		  </a>
            <?php endforeach ?>
    	</div>
</div>

Image (right):

<div class="project-thumb-big">			
    <h1 class="project-title"><?php echo $project->title()->html()?></h1>
	<p class="project-description"><?php echo $project->description()->html()?></p>
	<?php echo thumb($project->image()) ?>
</div>

and the js for this:

$(document).ready(function() {
  $(".preview").hover(function() {
    $('.project-thumb-big').fadeIn(220);
  }, function() {
    $('.project-thumb-big').fadeOut(220);
  });
});
4

You current code addresses all thumbs with the class project-thumb-big. This code therefore lacks a connection between the project thumb and the project. Your project thumb should have an attribute that allows you to make that connection, for example:

<div class="project-thumb-big" data-project="<?= $project->url() ?>">
    <h1 class="project-title"><?php echo $project->title()->html()?></h1>
    <p class="project-description"><?php echo $project->description()->html()?></p>
    <?php echo thumb($project->image()) ?>
</div>

And your JavaScript:

$(document).ready(function() {
  $(".preview").hover(function() {
    $('.project-thumb-big[data-project="' + $(this).attr('href') + '"]').fadeIn(220);
  }, function() {
    $('.project-thumb-big[data-project="' + $(this).attr('href') + '"]').fadeOut(220);
  });
});
5

AH nice! Thank you.

But for any reason the thumb is only visible when hovering the second link in the list.

6

Is there a thumb for each project in your source code?

7

Ive got it. I solved with another loop. :slight_smile:

Thanks again for your help