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

#   MouseOver Effect For Product Images

##

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

Less More

- Posts: 5
- Thank you received: 1
-
-

14 years 7 months ago [\#42708](#42708) by [rbedica](/forum/user/6604-rbedica "View rbedica's Profile")  *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#42708 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")* was created by *[rbedica](/forum/user/6604-rbedica "View rbedica's Profile")*

Hi There

Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.

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

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86290
- Thank you received: 14268
-
-

14 years 7 months ago [\#42713](#42713) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#42713 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Hi,

You can change the line: Code:

&lt;?php echo $this-&gt;image-&gt;display(@$image-&gt;file_path,true,@$image-&gt;file_name,'id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"', $width, $height); ?&gt;

to: Code:

&lt;?php echo $this-&gt;image-&gt;display(@$image-&gt;file_path,true,@$image-&gt;file_name,'id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link" onhover="SqueezeBox.fromElement(this,{parse: \'rel\'});return false;" ', $width, $height); ?&gt;

in the file show_block_img of your front end template via the menu Display-&gt;Views in order to do that.

The following user(s) said Thank You: [janevert](/forum/user/6711-janevert "View janevert's Profile")

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

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

Less More

- Posts: 5
- Thank you received: 1
-
-

14 years 7 months ago [\#42716](#42716) by [rbedica](/forum/user/6604-rbedica "View rbedica's Profile")  Replied by *[rbedica](/forum/user/6604-rbedica "View rbedica's Profile")* on topic *[Re: MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#42716 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Thanks Nicolas. I tried but its still not working even after changing the code its still showing large pic after clicking. Can you help?

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

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86290
- Thank you received: 14268
-
-

14 years 7 months ago [\#42717](#42717) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#42717 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Please make sure that you do the change for the correct template.

The following user(s) said Thank You: [janevert](/forum/user/6711-janevert "View janevert's Profile")

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

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

Less More

- Posts: 5
- Thank you received: 1
-
-

14 years 7 months ago [\#44140](#44140) by [rbedica](/forum/user/6604-rbedica "View rbedica's Profile")  Replied by *[rbedica](/forum/user/6604-rbedica "View rbedica's Profile")* on topic *[Re: MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#44140 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

i have updated the file "show_block_img" in my frontend template (i applied this on the template i am using). But still image is getting big after clicking on it not on the "Mouseover" . Following is the entire code of the changed "show_block_img" file. Please suggest if i am doing some thing wrong. Also can i have this effect on product listing page as well

&lt;?php
/**
* @package HikaShop for Joomla!
* @version 1.5.6
* @author hikashop.com
* @copyright (C) 2010-2012 HIKARI SOFTWARE. All rights reserved.
* @license GNU/GPLv3 [ www.gnu.org/licenses/gpl-3.0.html](http://www.gnu.org/licenses/gpl-3.0.html)
*/
defined('_JEXEC') or die('Restricted access');
?&gt;
&lt;div id="hikashop_product_image_main" &gt;
&lt;div id="hikashop_main_image_div" class="hikashop_main_image_div"&gt;
&lt;?php
if(!empty ($this-&gt;element-&gt;images)){
$image = reset($this-&gt;element-&gt;images);
}
$height = $this-&gt;config-&gt;get('product_image_y',$this-&gt;config-&gt;get('thumbnail_y'));
$width = $this-&gt;config-&gt;get('product_image_x',$this-&gt;config-&gt;get('thumbnail_x'));
if (!$this-&gt;config-&gt;get('thumbnail')) {
if(!empty ($this-&gt;element-&gt;images)){
echo '&lt;img src="' . $this-&gt;image-&gt;uploadFolder_url . $image-&gt;file_path . '" alt="' . $image-&gt;file_name . '" id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" /&gt;';
}
} else {
$style = '';
if (!empty ($this-&gt;element-&gt;images) &amp;&amp; count($this-&gt;element-&gt;images) &gt; 1) {
if (!empty ($height)) {
$style = ' style="height:' . ($height +5) . 'px;"';
}
}
?&gt;
&lt;div class="hikashop_product_main_image_thumb" id="hikashop_main_image_thumb_div" &lt;?php echo $style;?&gt; &gt;

&lt;?php echo $this-&gt;image-&gt;display(@$image-&gt;file_path,true,@$image-&gt;file_name,'id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link" onhover="SqueezeBox.fromElement(this,{parse: \'rel\'});return false;" ', $width, $height); ?&gt;

&lt;/div&gt;
&lt;?php
}
?&gt;
&lt;/div&gt;
&lt;div id="hikashop_small_image_div" class="hikashop_small_image_div"&gt;
&lt;?php
if (!empty ($this-&gt;element-&gt;images) &amp;&amp; count($this-&gt;element-&gt;images) &gt; 1) {
foreach ($this-&gt;element-&gt;images as $image) {
echo $this-&gt;image-&gt;display($image-&gt;file_path, 'hikashop_main_image', $image-&gt;file_name, 'class="hikashop_child_image"','', $width, $height);
}
}
?&gt;
&lt;/div&gt;
&lt;/div

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

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86290
- Thank you received: 14268
-
-

14 years 7 months ago [\#44332](#44332) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#44332 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

In my previous code, it should be "onmouseover" instead of "onhover"

The following user(s) said Thank You: [sarawhite](/forum/user/6287-sarawhite "View sarawhite's Profile")

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

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

Less More

- Posts: 5
- Thank you received: 1
-
-

14 years 7 months ago [\#44523](#44523) by [rbedica](/forum/user/6604-rbedica "View rbedica's Profile")  Replied by *[rbedica](/forum/user/6604-rbedica "View rbedica's Profile")* on topic *[Re: MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#44523 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Gr8 its working perfect on the product page thanks.... Gr8 Support from Gr8 Product..... ![:)](/media/kunena/emoticons/8.png ":)")

The following user(s) said Thank You: [sarawhite](/forum/user/6287-sarawhite "View sarawhite's Profile")

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

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

Less More

- Posts: 33
- Thank you received: 0
-
-

13 years 10 months ago -  13 years 10 months ago [\#79773](#79773) by [janevert](/forum/user/6711-janevert "View janevert's Profile")  Replied by *[janevert](/forum/user/6711-janevert "View janevert's Profile")* on topic *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#79773 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Hello i have change this and work perfect but can i do this also on the next page [ www.universal-gemstone.com/index.php/com...cedoon.html?Itemid=1](http://www.universal-gemstone.com/index.php/component/hikashop/category/69-chalcedoon.html?Itemid=1)
to "onmouseover" where do i have to change it and into what?

Last edit: 13 years 10 months ago by [janevert](/forum/user/6711-janevert "View janevert's Profile").

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

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86290
- Thank you received: 14268
-
-

13 years 10 months ago [\#79835](#79835) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#79835 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Hi,

Here is a thread which talks about that for listings:
[ www.hikashop.com/forum/4-how-to/49351-sh...r.html?lang=en#49421](http://www.hikashop.com/forum/4-how-to/49351-show-big-picture-on-mouse-hover.html?lang=en#49421)
In your case, you're apparently using the listing_img_desc item box layout and not the default listing_img_title mentioned in that post but the code to use should be pretty similar.

Note though that the code of the image display changed a bit since then so it might require some modification. Let us know if it doesn't work and what and how it doesn't work.

The following user(s) said Thank You: [janevert](/forum/user/6711-janevert "View janevert's Profile")

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

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

Less More

- Posts: 33
- Thank you received: 0
-
-

13 years 10 months ago -  13 years 10 months ago [\#79848](#79848) by [janevert](/forum/user/6711-janevert "View janevert's Profile")  Replied by *[janevert](/forum/user/6711-janevert "View janevert's Profile")* on topic *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#79848 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

So fare its work ok , only the half of the screen become gray so i tried just to change the mouseover into mouseclick and its works perfect

Thanks.

- [ ![Peridoot&#95;2012-12-01&#95;22-28-56.png](/forum/attachment/7291) ](/forum/attachment/7291 "...1&#95;22-28-56.png") [ ](/forum/attachment/7291?download=1 "...1&#95;22-28-56.png")

Last edit: 13 years 10 months ago by [janevert](/forum/user/6711-janevert "View janevert's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNzA4LW1vdXNlb3Zlci1lZmZlY3QtZm9yLXByb2R1Y3QtaW1hZ2VzP3RtcGw9bWFya2Rvd24=) 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")
- [ Offline](/forum/user/80-jerome)
- HikaShop core developer

Less More

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

13 years 10 months ago [\#79850](#79850) 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 For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#79850 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Hi,

I think this is a problem with the Joomla "modal" library and your template.

Regards,

---

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

The following user(s) said Thank You: [janevert](/forum/user/6711-janevert "View janevert's Profile")

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

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

Less More

- Posts: 33
- Thank you received: 0
-
-

13 years 10 months ago -  13 years 10 months ago [\#79854](#79854) by [janevert](/forum/user/6711-janevert "View janevert's Profile")  Replied by *[janevert](/forum/user/6711-janevert "View janevert's Profile")* on topic *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#79854 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

I will leave it with the mouseclick that work ok, with the mouseover you can get greasy like mentioned before in this topic.

so thanks for the help

Last edit: 13 years 10 months ago by [janevert](/forum/user/6711-janevert "View janevert's Profile").

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

- **[viki667](/forum/user/28401-viki667 "View viki667's Profile")**
- [![viki667's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar28401.jpg)](/forum/user/28401-viki667 "View viki667's Profile")
- [ Offline](/forum/user/28401-viki667)

Less More

- Posts: 17
- Thank you received: 0
-
-
- [](http://www.modernikoti.fi)
-

13 years 3 weeks ago -  13 years 3 weeks ago [\#126466](#126466) by [viki667](/forum/user/28401-viki667 "View viki667's Profile")  Replied by *[viki667](/forum/user/28401-viki667 "View viki667's Profile")* on topic *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#126466 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Hello

Can anybody tell me how to switch off this mouseover thumbnails effect on product page? I mean that when i move mouse over thumbnail image (orientation: portrait) the image hides away thumbnails at the bottom.. &lt;&lt;&lt;&lt; Look at pic 1

it came after i tried to solve the problem on the second image (Product page) whereby i changed the configuration-&gt;Display-&gt;css
.hikashop_product_main_image_thumb{
margin-bottom:-100px;

and completely another question about this MouseOver Effect...
changing the php code in: listing_img_title" of the view "product". doesn't for some reason work and i noticed this php code is much longer there than written above...

And thank you soo much hikashop team.. love the product - learning every day ![:)](/media/kunena/emoticons/8.png ":)")

---

*Laadukas moderni kulmasohva, valkoinen kulmasohva tai iso kulmasohva: [ ModerniKoti](http://www.modernikoti.fi)*

- [ ![h9c39149.PNG](/forum/attachment/12676) ](/forum/attachment/12676 "h9c39149.PNG") [ ](/forum/attachment/12676?download=1 "h9c39149.PNG")
- [ ![hbc6ad89.PNG](/forum/attachment/12677) ](/forum/attachment/12677 "hbc6ad89.PNG") [ ](/forum/attachment/12677?download=1 "hbc6ad89.PNG")

Last edit: 13 years 3 weeks ago by [viki667](/forum/user/28401-viki667 "View viki667's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNzA4LW1vdXNlb3Zlci1lZmZlY3QtZm9yLXByb2R1Y3QtaW1hZ2VzP3RtcGw9bWFya2Rvd24=) 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")
- [ Offline](/forum/user/80-jerome)
- HikaShop core developer

Less More

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

13 years 3 weeks ago [\#126475](#126475) 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 For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#126475 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Hi,

There is in HikaShop an option to set the image size for the product page.
These dimensions (height and width) creates some kind of virtual box where the images would be displayed. So the box will always have the same size.

If you want, you can override the view "product &#124; show_block_img" to change how the images are displayed in the product page.
You will be able to change mostly everything.
If you are using HikaShop 2.2.2 (that I will recommend you), the popup system and the mouse hover have been moved into the view instead of using a specific function in a class (that was harder to override).
So HikaShop 2.2.2 is easier for override the images in the product page.

Regards,

---

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

The following user(s) said Thank You: [viki667](/forum/user/28401-viki667 "View viki667's Profile")

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

- **[viki667](/forum/user/28401-viki667 "View viki667's Profile")**
- [![viki667's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar28401.jpg)](/forum/user/28401-viki667 "View viki667's Profile")
- [ Offline](/forum/user/28401-viki667)

Less More

- Posts: 17
- Thank you received: 0
-
-
- [](http://www.modernikoti.fi)
-

13 years 3 weeks ago [\#126495](#126495) by [viki667](/forum/user/28401-viki667 "View viki667's Profile")  Replied by *[viki667](/forum/user/28401-viki667 "View viki667's Profile")* on topic *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#126495 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

> Jerome wrote: Hi,
> There is in HikaShop an option to set the image size for the product page.
> These dimensions (height and width) creates some kind of virtual box where the images would be displayed. So the box will always have the same size.
> Regards,

gosh, it really worked, thank you so much Jerome ![:)](/media/kunena/emoticons/8.png ":)") ![:)](/media/kunena/emoticons/8.png ":)") ![:)](/media/kunena/emoticons/8.png ":)")

---

*Laadukas moderni kulmasohva, valkoinen kulmasohva tai iso kulmasohva: [ ModerniKoti](http://www.modernikoti.fi)*

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

- **[PubSite](/forum/user/28074-pubsite "View PubSite's Profile")**
- [![PubSite's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar28074.jpg)](/forum/user/28074-pubsite "View PubSite's Profile")
- [ Offline](/forum/user/28074-pubsite)

Less More

- Posts: 100
- Thank you received: 1
-
-

13 years 1 week ago [\#127787](#127787) by [PubSite](/forum/user/28074-pubsite "View PubSite's Profile")  Replied by *[PubSite](/forum/user/28074-pubsite "View PubSite's Profile")* on topic *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#127787 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Hi,

Is there a way to add this effect to the carousel? The only thing is, I don't want the image to be maximized. I just want to be a little bigger when mouse hovers on it. I think this is a feature the carousel should have by default. But what can I do about it now that it doesn't have it as a default feature. I really need it. Please HELP!!!

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

- **[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")**
- [![Mohamed Thelji's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar6861.png)](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")
- [ Offline](/forum/user/6861-mohamed-thelji)

Less More

- Posts: 12953
- Thank you received: 1778
-
-
-

13 years 1 week ago -  13 years 1 week ago [\#127805](#127805) by [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")  Replied by *[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")* on topic *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#127805 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Hi,

I think that this can be done by using some [ CSS ](http://www.hikashop.com/support/19-documentation/hikashop/installation-configuration/84-css-styling.html)code customization like : Code:

.YourCarouselClass img:hover { width: 300px; }

Last edit: 13 years 1 week ago by [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile").

The following user(s) said Thank You: [PubSite](/forum/user/28074-pubsite "View PubSite's Profile")

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

- **[PubSite](/forum/user/28074-pubsite "View PubSite's Profile")**
- [![PubSite's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar28074.jpg)](/forum/user/28074-pubsite "View PubSite's Profile")
- [ Offline](/forum/user/28074-pubsite)

Less More

- Posts: 100
- Thank you received: 1
-
-

13 years 1 week ago [\#127833](#127833) by [PubSite](/forum/user/28074-pubsite "View PubSite's Profile")  Replied by *[PubSite](/forum/user/28074-pubsite "View PubSite's Profile")* on topic *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#127833 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

I did this:
.hikashop_main_carousel_divimg:hover {
width: 300px;
}
.hikashop_main_carousel_div ul li{

padding: 0px !important;
background: none !important;
}
.... is it correct?! because I didn't get any result.. I found one CAROUSEL in my CSS and I added to it. I think I did it wrong because I got no results. Help me out please!

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

- **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")**
- [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile")
- [ Offline](/forum/user/4105-xavier)

Less More

- Posts: 13201
- Thank you received: 2322
-
-
-
- [](http://www.kidiweb.fr)
-

13 years 1 week ago [\#127867](#127867) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile")  Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#127867 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

You will have to apply it on a parent div:
[code]
.hikashop_main_carousel_div .hikashop_product_image:hover{
width: 300px;
}

The following user(s) said Thank You: [PubSite](/forum/user/28074-pubsite "View PubSite's Profile")

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

- **[PubSite](/forum/user/28074-pubsite "View PubSite's Profile")**
- [![PubSite's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar28074.jpg)](/forum/user/28074-pubsite "View PubSite's Profile")
- [ Offline](/forum/user/28074-pubsite)

Less More

- Posts: 100
- Thank you received: 1
-
-

13 years 1 week ago [\#127887](#127887) by [PubSite](/forum/user/28074-pubsite "View PubSite's Profile")  Replied by *[PubSite](/forum/user/28074-pubsite "View PubSite's Profile")* on topic *[MouseOver Effect For Product Images](/forum/4-how-to/42708-mouseover-effect-for-product-images#127887 "Hi There  Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.")*

Dear Xavier.. I did as you said and all I get now is a movement to right which is not correct as you can see in this link : [ 212.113.141.199/~pubnew/newcatalog/index.php/fa/](http://212.113.141.199/~pubnew/newcatalog/index.php/fa/) ... what I'm looking for is a kind of effect which won't move the items but just enlarges the images a bit.. right where they are... Thanks for the help you've given me so far.. It would be great if you tell me where my flaw is... I'll provide the CSS as well..

.hikashop_main_carousel_div .hikashop_product_image:hover{width: 300px; }
.hikashop_main_carousel_div ul li{

padding: 0px !important;
background: none !important;
}
.hikashop_main_carousel_div .hikashop_product_image:hover{width: 300px;}

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

Board Categories HikaShop- Install &amp; Update- Product &amp; Category Display- Content Creation- Sales and Orders- - Orders management- - Reports &amp; Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import &amp; Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel &amp; Slider- - Mass Actions- - Filters &amp; Search- - Discount &amp; 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.616 seconds

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

[](#top)
