I recently customized a bootstrap product card to allow users to access the product details either by clicking on the card itself or by clicking on the product name. To achieve this, I utilized Bootstrap's stretched-link class. However, an issue arose where all of the :hover behaviors on different elements within the card were lost.
This is how my card looks like:
<div class="col mb-4">
<div class="product-card">
<img src="../asset/images/golden-chain-purse.jpg" class="card-img-top product-img" alt="...">
<p class="product-price">{{ product.price }}
€
</p>
<a class="etsy-button" href="{{ product.etsyLink }}" target="_blank">Buy on Etsy ©</a>
<a class="product-details-link stretched-link" href="{{ path('product_details', {product_id: product.id }) }}"></a>
</div>
<a class="product-details-link" href="{{ path('product_details', {product_id: product.id }) }}">
<h5 class="card-title">{{ product.name }}</h5>
</a>
</div>
Here are the CSS styles for the hover effects on my card:
.product-card:hover img {
filter: blur(3px);
}
.product-card:hover :not(img) {
opacity: 1;
transition: .5s;
}
.etsy-button:hover {
background-color: rgba(238, 182, 191, 0.637);
padding: 0.4em 0.6em;
text-decoration: none;
margin-top: 0.3em;
}
.product-details-link:hover {
text-decoration: none;
}