Hover display div with foreach

1

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…!

2

Could you show your loop with the HTML please?

3

here:! :slight_smile:

<style>
.book-list:hover .book-des { display:block }
</style>

<?php 
    $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>

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

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.