Dynamic background color change on hover

Kirby 3 Solved ✅
1

Hello All,

I have a portfolio page displaying a list of projects randomly, with each item assigned to a unique CSS position. (Thanks again for the help on this one @texnixe.)

Now I would like this portfolio page background color to change depending on which project / thumbnail is being hovered.

I have my colors set for each project using kirby-color plugin so each page has its own color assigned (and can be changed into the panel), labeled as color.

I believe there is a few different ways to tackle this, but how would you guys go about this ?

my random portfolio index goes as follow:

    <main class="main">
        <h1><?= $page->title() ?></h1>

            <?php $projects = $page->children()->listed()->shuffle()->limit(15); ?>

            <ul> 

                <?php foreach ($projects as $project): ?>
                <li class="overview-item <?= 'position-' . ($projects->indexOf($project) + 1) ?>">
                    <div class="<?= $project->color() ?>">
                        <a href="<?= $project->url() ?>">
                            <figure>
                                <img src="<?= $project->image()->url() ?>" class="lazy" alt="<?= $project->alt() ?>">                      
                                <figcaption><?= $project->title() ?></figcaption>
                            </figure>
                        </a>
                    </div>
                </li>
                <?php endforeach ?>

            </ul> 

    </main>

Now something that seems much fancier than inline js, would be creating unique IDs and divs (only need hover, then revert to overview/portofolio color):

<?php if(isset($project)) : ?>
...

<?php $colors = [];
<?php foreach($projects as $project): ?>
  <?php $class = 'background-' . uniqid(); $colors[$class] = $project; ?>
  
  <div class="<?= $class ?>">
    ...
  </div>
<?php endforeach ?>

<style>
  <?php foreach($colors as $class => $project): ?>
    .<?= $class ?> {
      background: <?= $project->primary_color() ?>; 
    }
    
    .<?= $class ?>:hover, .<?= $class ?>:focus {
      background: <?= $project->secondary_color() ?>; 
    }
  <?php endforeach ?>
</style>

Now I don’t know if that’s the best route, since I might want to transition with fade and/or ease colors and I have also no clue how to plug the latter into the former…

Let me know your thoughts and in case you didn’t notice total beginner here :slight_smile:

Many thanks,
v

2

I’d add a data attribute for the color to each project and then use a JavaScript listener to change the color.

3

As @texnixe already said, I’d use JS. Not because it can’t be done with just CSS but because depending on your site it can become a bit of a nightmare to maintain it as a solution.

I’d personally store the background color in a data attribute and update a css variable.

Kinda like this https://codepen.io/manuelmoreale/pen/WNMovNg

4

Thank you both for this ! much appreciated.

I had to fiddle a bit but I got the base principle working. Pages are loading their corresponding data-bg stored in the text file (again, I have a color picker in the panel for my portfolio galleries), the li element returns all bg-color and addEventListener gives me the mouse enter / mouse leave events.

The pen was really helpful @manuelmoreale, however I’m trying to understand why I would need a css div:nth-child() for each div hovered.

Noob question but couldn’t it be a var in the js instead ? something like

    var newcolor = ["<?= $project->color()?>"];
    var basecolor = ["<?= $projects->color()?>"];

then my mouse enter mouse leave event listener ?

Lastly, I used a script tag and was wondering how to bring it into a js file instead since this principle will be used for all galleries with children pages.
Should it start with a document ready or something ?

Thanks again to you both,
v

5

Those are only used to color the elements themselves in the example.

Why do you want to use PHP in the script? Much cleaner to pass those values via data attributes.

And this one wouldn’t even work, because the correct $project is only known in the loop. After the loop $project has the value of the last project in the loop.

Edit: And also, you wouldn’t be able to move your JavaScript out of your templates if you define your variables via PHP.

6

As @texnixe said the nth-child is just there for the demo. Actually almost the entire CSS is there just for the demo. The only part of that css you need is the css variable to apply the background color and the transition if you want the change to have an animation.

I see no point in adding the variables using PHP when you can use data-attributes. It’s why they exist.

7

Thanks for you patience to you both :wink:

Thought adding a data attribute was what I was doing with

<div data-bg="<?= $project->color() ?>"></div>

within my projects.php

my previous question was just me wondering about another route, but it doesn’t work indeed and you already gave me everything I need.

Thanks again,
v

8

Yes, that’s correct.