Key Feature, no color

hi,

I add some new images and the color of image no appears on mouse hover

I add in css style1:
.gkWine > span { background-image: url('../images/style1/gk_wine.png'); }
.gkWine:hover > span { background-image: url('../images/style1/gk_wine.png'); }

and module custom html:
<div class="gkFeatures gkPerspective"><a class="gkWine" href="#" data-animation="flip" data-delay="0"><span>Wine</span>Wine Emotions - 6 Days</a>

and put the image gk_wine.png in ...images/style1

if I change one of the original images the color is ok. What is the problem?

Could You post an url to your site?

is possible send pm? site is offline

Yes, please send me a PM wit hlink to site (login and passwd) and link to this thread.

Ok, now I see exactly what You mean .
The problem is with hover effect - orange background do change, but circled image stays in grayscale instead of color.
I see You have added this style:

Code: Select all

.gkNos:hover > span {
background-image: url('../images/style1/gk_nos.png');
}


to style1.css, but I would suggest to use override.css instead (if You will ever want to upgrade template, then You will need to backup only override.css).
The problem is, that You have forgot about moving hovered "sprite" image to bottom. As You cant do it with background-image, the better solution would be to use:

Code: Select all

.gkNos:hover > span {
background: transparent url('../images/style1/gk_nos.png') 0 100% no-repeat;
}


and this will work for homepage.

With subpage problem is exact. Change:

Code: Select all

.gkWine:hover > span {
background-image: url('../images/style1/gk_wine.png');
}


to

Code: Select all

.gkWine:hover > span {
background: transparent url('../images/style1/gk_wine.png') 0 bottom no-repeat;
}


for first element, and same change to other - and it will work.