Hover display div with foreach

Hi! I want to make image grid with hover effect.
like… when I hover on image then display title. So I use .book-list:hover .book-des { display:block } this option, but I used foreach loop so, with this code…
when I hover some image, every image display title… not only selected image.
is there any good way to use css hover option with foreach loop…?
thank you…!

Could you show your loop with the HTML please?

here:! :slight_smile:

.book-list:hover .book-des { display:block }

    $bookList = page('home')->children()->listed();

<?php foreach ($results as $result): ?>
        <div class="book-slide">
            <?php if ($bookImage = $result->image()) : ?>
                <a href="<?= $result->url() ?>">
                <?= $bookImage->resize(600, null) ?>
                    <div class="book-des">
                        <div class="book-author"><?= $result->author() ?></div>
                        <div class="book-title"><?= $result->title() ?></div>
                        <div class="book-year"><?= $result->year() ?></div>
                        <div class="book-company"><?= $result->company() ?></div>
                        <div class="book-isbn"><?= $result->isbn() ?></div>

                    <div class="book-tag">
                        <div class="tag-category"><?= $result->category() ?></div>
                        <div class="tag-librarian"><?= $result->librarian() ?></div>
            <?php endif ?>
    <?php endforeach ?>

What is .book-list, can’t see that item in your above code.

Should be

.book-des {
    display: none;
.book-slide:hover .book-des { display:block }

But this is nothing Kirby related.