THEGRID hover effect with CSS FILTER

[jm69007]

Hello, I have normalized all the colors of my images showed in a grid (THEGRID plugin) with a css black and white filter:
.tg-item-media-inner{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
I would like to reset this effect on roll-over. Is it possible?

[lely]

Hi Jerome,

Do you mean hover when you say roll-over? We can reset it by setting filter value to none. Something like this:

.tg-item-media-inner{
filter: none;
-webkit-filter: none;
}

For that to work though, we need you to share the URL with the grid. This is so we can see on which element we need to add the hover action.

[jm69007]

Yes it’s for “roll-over” but pb is that the roll-over isn’t on the .tg-item-media-inner. I’ve tried this jquery:

i$(".tg-item-link").hover(function(){$(".tg-item-media-inner").css("-webkit-filter","none");}, function(){$(".tg-item-media-inner").css("-webkit-filter","grayscale(100%)");});

But it operates on all images and i just want adding the roll-over effect on this image.

I’ve tried to select parent with
$(this).parentsUntil(".tg-item-media-inner").css("-webkit-filter","none");
But it fails…

[jm69007]

I find to traverse the DOM. It’s ok when I’m on admin panel JS (…/#/options) bur not in production

n$(".tg-item-link").hover(function(){$(this).parent().parent().parent().siblings(".tg-item-media-inner").css(“filter”,“none”).css("-webkit-filter",“none”);}, function(){$(".tg-item-media-inner").css(“filter”,“grayscale(100%)”).css("-webkit-filter",“grayscale(100%)”);});

[jm69007]

It’s OK with good declarations of jquery

    jQuery(function($){

$(".tg-item-link").hover(function(){
$(this).parent().parent().parent().siblings(".tg-item-media-inner").css(“filter”,“none”).css("-webkit-filter",“none”);
}, function(){
$(".tg-item-media-inner").css(“filter”,“grayscale(100%)”).css("-webkit-filter",“grayscale(100%)”);
});
})

[jm69007]

Not really good enought:

1. it doesn’t work with ajax “load more”
2. .tg-item-link is specific to one skin (Malabo), it doesn’t work with my skins for others skins (for video, posters etc.)

Have you an another way?

[jm69007]

Finally, I build my own skins with the skin builder and it’s OK

[Prasant]

Glad to hear that.