Strange behaviour with hovering over a product

[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

[ecartz]

In Firefox, I can't tell the difference between those two pages. Perhaps a browser-specific behavior? Or am I missing something subtle?

[tessthepup]

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

[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 ?

[tessthepup]

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>

[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

[tessthepup]

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

[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?

[tessthepup]

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.