Change rollover effect
Rate this topic: 




1.00 out of 6 based on 1 vote(s)
- GK User
- Fri Aug 17, 2012 9:17 am
- Reply with quote
- Report this post
Hi, my client does not like the rollover effect of the modules (the way that the pic tilts and zooms when I rollover), is there a way to turn it off, or select a different effect?
Thanks for your help,
Jelmar
Thanks for your help,
Jelmar
-

- Fresh Boarder
- GK User
- Fri Aug 17, 2012 10:51 am
- Reply with quote
- Report this post
You can add below css code in to css/override.css and enable css override from template settings > advanced settings > css override "on".
See you around...
- Code: Select all
.nspArt .nspImageWrapper:hover img {-moz-transform: none!important;}
See you around...
-

- Platinum Boarder
- GK User
- Mon Oct 15, 2012 10:01 pm
- Reply with quote
- Report this post
Tried this code and added it to the override.css although the effect is still functioning.
CSS Override has been enabled in the template options?! any ideas?
CSS Override has been enabled in the template options?! any ideas?
-

- Junior Boarder
- GK User
- Mon Oct 15, 2012 11:31 pm
- Reply with quote
- Report this post
Please post a link to your website so we can check which css class effects your modules as below code does work in demo website.
See you around...
See you around...
-

- Platinum Boarder
- GK User
- Mon Oct 22, 2012 11:55 am
- Reply with quote
- Report this post
I used the suggested code for override and worked for me when hover over images, but the text link (h4 nspHeader) used below the images are still active and when you hover over, the images still scale and rotate.
I don't want to mess the gk.stuff.css - Any more override code suggestion for headers?
Thanks.
I don't want to mess the gk.stuff.css - Any more override code suggestion for headers?
Thanks.
-

- Fresh Boarder
- GK User
- Mon Oct 22, 2012 6:22 pm
- Reply with quote
- Report this post
Hey my site is http://www.visuallinemedia.com
-

- Junior Boarder
- GK User
- Tue Nov 13, 2012 1:18 pm
- Reply with quote
- Report this post
Sorry for the late reply, I was offline due to health problems. I have checked your website and I cannot see any more rollover effects. Let me know if you still need help with this.
See you around...
See you around...
-

- Platinum Boarder
- GK User
- Sun Mar 31, 2013 1:25 pm
- Reply with quote
- Report this post
I have the same problem and have also tried the code into the override.css with no effect.
Please help to get rid of the movement:
Here is my web: www.ninakarlssonsalon.es and also www.nina-karlsson-salon.es
Please help to get rid of the movement:
Here is my web: www.ninakarlssonsalon.es and also www.nina-karlsson-salon.es
-

- Expert Boarder
- GK User
- Fri Apr 05, 2013 7:40 am
- Reply with quote
- Report this post
@mittspania.
Please use following css code in your override.css
See you around...
Please use following css code in your override.css
- Code: Select all
.itemImageBlock img:hover {transform: none!important;}
See you around...
-

- Platinum Boarder
- GK User
- Fri Apr 05, 2013 8:24 am
- Reply with quote
- Report this post
The code, which seems absolute correct, did not have any effect.
The picture is still twisting and "comming up to my face"
How can we get rid of this !!??
The picture is still twisting and "comming up to my face"
How can we get rid of this !!??
-

- Expert Boarder
- GK User
- Fri Apr 05, 2013 9:35 am
- Reply with quote
- Report this post
This is the code you have added in your override.css which is not correct. Please check and correct.
Your code
Should be
See you around...
Your code
- Code: Select all
.nspArt .nspImageWrapper:hover img {
transform: none !important;
}
Should be
- Code: Select all
.itemImageBlock img:hover {transform: none!important;}
See you around...
-

- Platinum Boarder
- GK User
- Fri Apr 05, 2013 12:11 pm
- Reply with quote
- Report this post
I have and I had before added both those lines. The first was added because you posted that line in a former post (in the same tread.
Shall I delete the first line .nspArt .nspImageWrapper:hover img {
transform: none !important;
}
which you first presented to us in this tread?
Jan
Shall I delete the first line .nspArt .nspImageWrapper:hover img {
transform: none !important;
}
which you first presented to us in this tread?
Jan
-

- Expert Boarder
- GK User
- Fri Apr 05, 2013 8:53 pm
- Reply with quote
- Report this post
That part of the code is for News Show Pro module's rollover effect I believe which is not used in your website.
-

- Platinum Boarder
- GK User
- Sat Apr 06, 2013 9:31 am
- Reply with quote
- Report this post
I understand that if I put both codes in the override.css it is not wrong.
But as I said: The movement is still there. I do not want it at all. !
But as I said: The movement is still there. I do not want it at all. !
-

- Expert Boarder
- GK User
- Sat Apr 13, 2013 9:55 am
- Reply with quote
- Report this post
Post a sample link where rollover effects are available so I can see the css selectors then I can make a suggestion. See you around...
-

- Platinum Boarder
- GK User
- Sat May 04, 2013 12:37 pm
- Reply with quote
- Report this post
Here is one URL: http://nina-karlsson-salon.es/harvard.html
-

- Expert Boarder
- GK User
- Sat May 04, 2013 8:31 pm
- Reply with quote
- Report this post
Checked with Firefox and I cannot see rollover effect in that link. There is only image popup once you click on the image itself.
Which browser are you checking with ?
Which browser are you checking with ?
-

- Platinum Boarder
- GK User
- Sun May 05, 2013 1:16 pm
- Reply with quote
- Report this post
I use Chrome (latest ver) with the problem
The marked share for Chrome is much higher than Firefox, so I think this has to be solved also for Chrome
I that both Firefox and Internet Explorer works fine
The marked share for Chrome is much higher than Firefox, so I think this has to be solved also for Chrome
I that both Firefox and Internet Explorer works fine
-

- Expert Boarder
- GK User
- Mon May 06, 2013 2:29 am
- Reply with quote
- Report this post
Replace previous code in override.css to below code.
See you around...
- Code: Select all
.itemImageBlock img:hover { transform: none!important;-webkit-transform: none!important;}
See you around...
-

- Platinum Boarder
- GK User
- Wed May 15, 2013 4:47 am
- Reply with quote
- Report this post
That last code worked perfect. Your my man!!
-

- Expert Boarder
- GK User
- Wed May 15, 2013 5:05 am
- Reply with quote
- Report this post
No problem at all, see you around...
-

- Platinum Boarder
21 posts
• Page 1 of 1
