Multiple images on hover

The CMS Questions
1

Hello!

Im trying to make different images hover over different parts of text. I’m struggling to call the different images to the specific parts of the text that already exist in my txt.file

My code currently looks like this CSS in the index file:

  .hover-title {
        display: inline;
        pointer-events: auto;
        cursor: pointer;
    }

    .hover-image {
        visibility: hidden;
    }

    body:not(.mobile) .hover-title:hover + .hover-image {
        visibility: visible;
        pointer-events: none;
    }

    .hover-image {
        display: flex;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        pointer-events: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    /* Change width and height to scale images */
        width: 90vw;
        height: 90vh;
    }

    .hover-image img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        margin-bottom: 0;
    }

And the php in the template file looks like this:

<?php snippet('header') ?>

    <main>
      <?php snippet('intro') ?>

      <div class="text">
        <?= $page->text()->kt() ?>
        <div class="hover-title">#1: CREAM CHEESE (YOUR CHOICE OF): PLAIN, DILL & CAPER, CHIVE, CASHEW NUT (+$1.0), HONEY & RICOTTA — $7.0</div>
        <div class="hover-image"><?= $page->images()->first() ?></div>
      </div>



      <div class="hover-title">Image Hover Two</div>
      <div class="hover-image">{image 2}</div>

    </main>

    <?php snippet('footer') ?>

Sorry for the mess, I’m new to this and need some help :slight_smile:

Sam.

2

To be clear I’m trying to make a different image appear to the corresponding parts of this text…

Screen Shot 2020-08-05 at 5.33.40 pm
Screen Shot 2020-08-05 at 5.33.40 pm1736×1348 324 KB

3

How is the relationship between text and image defined, simply by number?

4

@pixelijn I think that’s my issue. That it isn’t defined at all. But I would want to define the image with the number on the menu which is in the txt file screenshot. So if I were to hover over #13, then the 13th jpg would appear.

5

This is how it currently looks…

Screen Shot 2020-08-06 at 2.52.54 pm
Screen Shot 2020-08-06 at 2.52.54 pm2880×1800 821 KB

6

I think I’d use a structure field with 2-4 fields: (number), text, (price) and image. The last one would be a files field where the user can select the corresponding image.

The (worse) alternative would be to store the menu number a file belongs to in the file meta data. I wouldn’t do that because the order of the menu entries could change.

7

Thank you @texnixe :slight_smile: I’ll have a play and see what happens. I think I have been trying to do the worse alternative currently hahaha