Page 1 of 1
Strange behaviour with hovering over a product
Posted: Tue Mar 28, 2023 6:26 pm
by tessthepup
Hi Guys,
I have added some CSS to show a view button when hovering over the product image in the product card however I have a strange issue and I am not sure why it is happening.
If you have a look at the index page, new product page or any product info page the on hover works
https://olivias-gifts.co.uk/
But if you look at products on this page (near the bottom) you will see that when hovering the button appears over all images at the same time.
https://olivias-gifts.co.uk/what-are-es ... -pi-7.html
The module uses the template product_card component so I dont understand why it does not work on the info page (or blog as I call it).
Thanks
Mark
Re: Strange behaviour with hovering over a product
Posted: Tue Mar 28, 2023 10:36 pm
by ecartz
In Firefox, I can't tell the difference between those two pages. Perhaps a browser-specific behavior? Or am I missing something subtle?
Re: Strange behaviour with hovering over a product
Posted: Thu Mar 30, 2023 10:30 am
by tessthepup
ecartz wrote: ↑Tue Mar 28, 2023 10:36 pm
In Firefox, I can't tell the difference between those two pages. Perhaps a browser-specific behavior? Or am I missing something subtle?
@ecartz
This is what I see in all browsers tested when hovering over a product
Re: Strange behaviour with hovering over a product
Posted: Thu Mar 30, 2023 3:00 pm
by burt
Possibly your .css is targetting something incorrectly. It's difficult to tell as it's quite difficult to understand the code you have on there. Seems like .middle but I can't see anything that is hoverable ?
Re: Strange behaviour with hovering over a product
Posted: Thu Mar 30, 2023 3:06 pm
by tessthepup
burt wrote: ↑Thu Mar 30, 2023 3:00 pm
Possibly your .css is targetting something incorrectly. It's difficult to tell as it's quite difficult to understand the code you have on there. Seems like .middle but I can't see anything that is hoverable ?
@burt
Hi Gary,
The css is
Code: Select all
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.4;
}
.container:hover .middle {
opacity: 1;
}
a.text {
background-color: #7F3FBF !important;
color: #fff;
font-size: 1rem;
padding: 16px 32px;
text-decoration: none;
border-radius: 4px;
border: 2px solid #7F3FBF;
}
.whiteiconcolor {
color: #fff;
font-size: 1rem;
}
and the product_card is
Code: Select all
<div class="card-header text-center mt-2 mb-3"><a href="<?= $product->get('link') ?>"><?= $product->get('name') ?></a></div>
<div class="container">
<div class="mx-4"><a href="<?= $product->get('link') ?>"><?= (new Image('images/' . $product->get('image'), ['class' => 'image', 'width' => SMALL_IMAGE_WIDTH, 'height' => SMALL_IMAGE_HEIGHT], htmlspecialchars($product->get('name'))))->append_css('card-img-top') ?></a></div>
<div class="middle">
<div><a class="text" href="<?= $product->get('link') ?>"><i class="fas fa-eye whiteiconcolor"></i> View</a></div>
</div>
</div>
Re: Strange behaviour with hovering over a product
Posted: Thu Mar 30, 2023 3:52 pm
by beerbee
Maybe this
Code: Select all
.container:hover .middle {
opacity: 1;
}
should look like that?
Code: Select all
.container .middle:hover {
opacity: 1;
}
Kind regards
Christoph
Re: Strange behaviour with hovering over a product
Posted: Thu Mar 30, 2023 3:55 pm
by tessthepup
beerbee wrote: ↑Thu Mar 30, 2023 3:52 pm
Maybe this
Code: Select all
.container:hover .middle {
opacity: 1;
}
should look like that?
Code: Select all
.container .middle:hover {
opacity: 1;
}
Kind regards
Christoph
@beerbee
Yes that did it Christoph, thank you
Re: Strange behaviour with hovering over a product
Posted: Thu Mar 30, 2023 3:58 pm
by burt
I dont know. I just put it on a test v1.0.8.21 and it seemed to work.
Suggest that somewhere on your blog pages, is perhaps some coding error that is forcing the .css to work incorrectly. How are those blog pages made?
Re: Strange behaviour with hovering over a product
Posted: Thu Mar 30, 2023 4:02 pm
by tessthepup
burt wrote: ↑Thu Mar 30, 2023 3:58 pm
I dont know. I just put it on a test v1.0.8.21 and it seemed to work.
Suggest that somewhere on your blog pages, is perhaps some coding error that is forcing the .css to work incorrectly. How are those blog pages made?
The blog pages are a reworked version of a commercial addon sold by another member.