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