Reverse hover effect in Portfolio pictures « Support Forum | Kriesi.at

Support Forum » Angular

Reverse hover effect in Portfolio pictures

10 posts from 5 voices

Started 1 year ago by moviestar007
Latest reply from Dude
This topic is closed
This topic is not a support question

Tags:

moviestar007
Member

Hi,

I would like to reverse the hover effect on the portfolio-pictures, they should be in color in normal status and in greyscale in hover status. Is there a simple way to acchieve this?

Thanks,
Andreas

Posted 1 year ago #

Dude
Dude

Hey,
open up angular/wp-content/themes/angular/js/aviapoly.js and search for following code:

greyscale_bindings: function()
				{
					$(".greyscale-active").delegate(".flex_column", "mouseenter", function()
					{
						var column 	= $(this), image = column.find('.greyscale-image');
					  	image.stop().animate({opacity:0},animTime);
					}
					).delegate(".flex_column", "mouseleave", function()
					{
						var column 	= $(this), image = column.find('.greyscale-image');
					  	image.stop().animate({opacity:1},animTime);
					});

				}

Replace it with following code:

greyscale_bindings: function()
				{
					$(".greyscale-active").delegate(".flex_column", "mouseenter", function()
					{
						var column 	= $(this), image = column.find('.greyscale-image');
					  	image.stop().animate({opacity:1},animTime);
					}
					).delegate(".flex_column", "mouseleave", function()
					{
						var column 	= $(this), image = column.find('.greyscale-image');
					  	image.stop().animate({opacity:0},animTime);
					});

				}

Posted 1 year ago #

moviestar007
Member

Thanks for that! Unfortunately I can't find this piece of code in the aviapoly.js :(
Can you please check again, maybe you mean another file? Sry, I'm not so firm in javascript or whatever this is ;)

Thanks

Posted 1 year ago #
Dude
Dude
Please make sure that you're using the latest theme version (1.1.1). Maybe try to search for following line only:
```
greyscale_bindings: function()
```
to find the right code part.
Posted 1 year ago #
remedycreative
Member

This doesn't seem to work entirely. For me, it has set the images to greyscale, which then turn full colour upon initial rollover. Then the expected greyscale rollover state kicks in.

Any ideas how to solve this?

Thanks!

Posted 1 year ago #
Mya

Hi,

Can you post a link to your website so we can see this live?

Regards,
Mya

Posted 1 year ago #
remedycreative
Member

Yes, it's at http://test.remedycreative.com/remedy/

Many thanks,

Sam

Posted 1 year ago #
kestrelnetwork
Member

Hey there - did we reach a solution for this problem? I'm having the same troubles.

Posted 1 year ago #
remedycreative
Member

Yes it's been sorted here…

http://www.kriesi.at/support/topic/reverse-hover-effect

Posted 1 year ago #
Dude
Dude

Hi!

I'll close this thread now.

Best regards,
Peter

Posted 1 year ago #