Have product title, price, and cart button appear as overlay on image on hover

  • Posts: 32
  • Thank you received: 1
4 years 4 months ago #325555

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.19
-- PHP version -- : 7.4

I'd like to use the content module to show products as follows:

Only the product image shows (no problem here)
On hover, the title, price, and cart button appear as in this Hikashop demo page. .
I used the code from this five year old thread but it only does the dark overlay and doesn't move the cart or any of the other details onto the image.

Can you help me achieve this please?

Please Log in or Create an account to join the conversation.

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
4 years 4 months ago #325559

Hello,

Yes, we can be help you, but in order to be more precise in our answer, in any customization case we won't provide you custom code to copy/paste.
We can only guide you to achieved this, and provide tutorial to learn how to proceed.

As a start have a look on this tutorial to see how to add custom css command to your frontend file Css
In order to be able to help you more precisely, please provide an Url link to your page in order to see where you are in your customization process.

Awaiting news from you to progress on your subject.
Regards

Last edit: 4 years 4 months ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 1
4 years 4 months ago #325583

Hi Phil.

I have a rudimentary knowledge of CSS and have been using my template's custom.css to make all my changes to keep them together.

I think where I'm struggling with this is knowing which divs to change and which properties to edit.

Correct me if I'm wrong, but if I'd like the cart button and price to be on the hidden / hover div, I need to translate the cart button and price divs up by however many pixels, then tell them they're hidden, but I'm not sure about the whole show-on-hover piece. My worry is that if I move them up by say, 50px, if I decide to make the product module smaller won't they then be too high up? I have no problem reading up and learning these things for myself, but I'm just not quite sure where to start :)

Here's a link: www.thescienceoffiction.rocks/test/mod

Username: templatehelp
PW: Template1!

Please Log in or Create an account to join the conversation.

  • Posts: 2143
  • Thank you received: 747
4 years 4 months ago #325584

Hi,

Not sure what the problem is... what you seem to be wanting is working here on your site: www.thescienceoffiction.rocks/test/ar

Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 1
4 years 4 months ago #325585

Ah that is different. I used SP Pagebuilder which has an image overlay plugin, so it's just an image and then a text box on the overlay with the product tags on.

I want to duplicate this effect but using the actual Hikashop product divs so I can make use of the modules to do random products etc. Otherwise I have to create overlay plugins for every product manually.

Please Log in or Create an account to join the conversation.

  • Posts: 83404
  • Thank you received: 13498
  • MODERATOR
4 years 4 months ago #325639

Hi,

If you set the "layout type" setting of your menu item / module to "img_pane", you'll have a hover effect using the product / listing_img_pane.php view file. Then, you can adapt the HTML/PHP of that view file via the menu Display>Views and/or add your own CSS to suits your needs.

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 1
4 years 4 months ago #325640

Hi Nicolas. I don't understand what you mean by "you'll have a hover effect using the product / listing_img_pane.php view file".

The mod is set to img_pane, and I have that view file open, but I'm not sure what I'm supposed to be looking for in there.

Last edit: 4 years 4 months ago by jeffmcbiscuit.

Please Log in or Create an account to join the conversation.

  • Posts: 83404
  • Thank you received: 13498
  • MODERATOR
4 years 4 months ago #325653

Hi,

My bad, I meant to say listing_fade.php with the layout "Fade".

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 1
4 years 4 months ago #325658

There is no "fade" layout type? And there's no fade view either.

Attachments:
Last edit: 4 years 4 months ago by jeffmcbiscuit.

Please Log in or Create an account to join the conversation.

  • Posts: 83404
  • Thank you received: 13498
  • MODERATOR
4 years 4 months ago #325662

Hi,

Ah yes, that layout is only available with the Business edition and I can see that you have the Essential edition. So that's why you don't have the option there.
I'm sorry for that.
Well, with the Essential edition, I don't see a way to do that easily. It will require some javascript coding + some HTML and CSS modifications in one of the other layouts to do that.

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 1
4 years 4 months ago #325734

Oof, bit of an odd thing to lock behind a £100 purchase but hey ho.

Please Log in or Create an account to join the conversation.

Time to create page: 0.097 seconds
Powered by Kunena Forum