Overlay on Hover

  • Posts: 23
  • Thank you received: 0
9 years 5 months ago #235933

-- url of the page with the problem -- : www.simplyscrewjacks.com
-- HikaShop version -- : 2.6.1
-- Joomla version -- : 3.5.1
-- PHP version -- : 5.5.34

Hi guys,

I have a great overlay on some images on my site when I hover over them (red tint with a magnify glass, see attached image) which I would like to replicate this when a user hovers over a category or product image. This effect came as part of the template (rocket theme iridescent) via a css class on the module (fp-roksprocket-strips).

Can anyone please tell me how to do this. I'm not a css or php expert and the effect elsewhere on the site came as part of the template and I believe this is the code in the template css that controls the existing feature:

.sprocket-strips-image-overlay{display:block;position:relative;overflow:hidden;}.fp-roksprocket-strips .sprocket-strips-image-overlay img{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}.fp-roksprocket-strips .sprocket-strips-image-overlay:before{font-family:FontAwesome;content:"\f002";font-size:1.75em;color:#ffffff;opacity:0;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%) scale(2);-moz-transform:translate(-50%,-50%) scale(2);-ms-transform:translate(-50%,-50%) scale(2);-o-transform:translate(-50%,-50%) scale(2);transform:translate(-50%,-50%) scale(2);-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;-webkit-font-smoothing:subpixel-antialiased;}.fp-roksprocket-strips .sprocket-strips-image-overlay:hover img{opacity:0.25;-webkit-transform:scale(1.15);-moz-transform:scale(1.15);-ms-transform:scale(1.15);-o-transform:scale(1.15);transform:scale(1.15);}.fp-roksprocket-strips .sprocket-strips-image-overlay:hover:before{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);-moz-transform:translate(-50%,-50%) scale(1);-ms-transform:translate(-50%,-50%) scale(1);-o-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}

Thanks for your help in advance.

Regards,

Aran

Attachments:

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

  • Posts: 84307
  • Thank you received: 13701
  • MODERATOR
9 years 5 months ago #236095

Hi,

You'll have to add your custom code in the file "listing_img_title" of the views "product" and "category" via the menu Display>Views.

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

Time to create page: 0.069 seconds
Powered by Kunena Forum