css - CSS Grid 图像悬停效果

Question

下面的方法为我提供了我想要的，但你认为有没有更简单的方法？（请考虑我是新手）有一些我不喜欢的东西。结果：https ://minalva.net/products （桌面）

我想要完成的是在悬停时更改每个网格图像元素，但两个图像都应该是动态的，因为它们将在服务器端工作。

HTML

<div class="product__div">
    <h2>New Products</h2>
</div>

<div class="product__grid">

    <% products.forEach(products => { %>

        <a href="products/<%=products.id%>">
            <figure>
                <div class="product__parent">
                <div class="child1"><img src="<%=products.img%>h.webp" alt="Minalva" class="img__hover"></div>
                <div class="child2"><img src="<%=products.img%>.webp" alt="Minalva" class="img__default"></div>
                </div>
                <p class="title"><%=products.category%></p>
                <p class="name"><%=products.title%></p>
                <p class="price"><%=products.price%> TL</p>
            </figure>
        </a>

        <% }) %>

</div>

SASS

#products

.product__div
    align-self: center
    margin-bottom: 40px
    h2
        @include main-fonts($custom-color-5)

.product__grid
    display: grid
    grid-template-columns: repeater(4, 1fr)
    --repeat: auto-fit
    column-gap: 25px
    row-gap: 40px

    .product__parent
        display: grid
        grid-template-columns: 1fr
        div
            grid-row: auto
            grid-column: auto
            grid-row-start: 1
            grid-column-start: 1

    .img__default
        width: 100%
        height: 100%
        opacity: 1
        transition: opacity 500ms ease
        border-radius: 10px

    .img__hover
        width: 100%
        height: 100%
        grid-row: auto
        grid-column: auto
        grid-row-start: 1
        grid-column-start: 1
        opacity: 0
        transition: opacity 500ms ease
        border-radius: 10px

    .title
        margin-top: 25px
        text-transform: uppercase

    .name
        padding-top: 5px

    .price
        margin: 5px 0 25px 0
        text-transform: uppercase

    a:hover .img__default
        opacity: 0

    a:hover .img__hover
        opacity: 1

标签： csssass