[Skip to main content](#vessel-content)

#   Mouseover effect from they use Hikashop

##

- **[Gjoed](/forum/user/28803-gjoed "View Gjoed's Profile")**
- [![Gjoed's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/28803-gjoed "View Gjoed's Profile") Topic Author
- [ Offline](/forum/user/28803-gjoed)

Less More

- Posts: 9
- Thank you received: 0
-
-

13 years 1 week ago [\#128641](#128641) by [Gjoed](/forum/user/28803-gjoed "View Gjoed's Profile")  *[Mouseover effect from they use Hikashop](/forum/26-product-category-display/862947-mouseover-effect-from-they-use-hikashop#128641 "Hi.  I'm new to Hikashop, and I found the design on the following page great with the mouseover effect.  How can this be done? is there a plugin or something that can do it. Or is there some build in effect in Hikashop or is that something you need to buy ekstra?")* was created by *[Gjoed](/forum/user/28803-gjoed "View Gjoed's Profile")*

Hi.

I'm new to Hikashop, and I found the design on the following page great with the mouseover effect.

How can this be done? is there a plugin or something that can do it. Or is there some build in effect in Hikashop or is that something you need to buy ekstra?

[ workaholicfashion](http://www.workaholicfashion.net/en/shop/product/listing)

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjI5NDctbW91c2VvdmVyLWVmZmVjdC1mcm9tLXRoZXktdXNlLWhpa2FzaG9wP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Jerome](/forum/user/80-jerome "View Jerome's Profile")**
- [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile")
- [ Away](/forum/user/80-jerome)
- HikaShop core developer

Less More

- Posts: 26394
- Thank you received: 4078
-
- [](http://obsi.dev)
-

13 years 1 week ago [\#128681](#128681) by [Jerome](/forum/user/80-jerome "View Jerome's Profile")  Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Mouseover effect from they use Hikashop](/forum/26-product-category-display/862947-mouseover-effect-from-they-use-hikashop#128681 "Hi.  I'm new to Hikashop, and I found the design on the following page great with the mouseover effect.  How can this be done? is there a plugin or something that can do it. Or is there some build in effect in Hikashop or is that something you need to buy ekstra?")*

Hi,

It can be done using a custom product listing which will generate the appropriate HTML with the four thumbnails (or less.. or more).
The trick is that, for each product their are four elements and four images. When the mouse move over one element, the background image is changed using the image attached to the targeted element. Code:

jQuery('.images_spacer').mouseover(function () { jQuery('.imgrow-'+jQuery(this).attr('rev')).html( jQuery(this).html() ); });

For the rest, it is HTML and CSS.

Regards,

---

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjI5NDctbW91c2VvdmVyLWVmZmVjdC1mcm9tLXRoZXktdXNlLWhpa2FzaG9wP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.202 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)

[](#top)