[ilmattiapascal]

Hi there,

thanks for your handy and nice theme!

i need your help because i don’t want to create problems, and i don’t know how to make changes in a clean way without affecting other parts of the site.

my site is http://www.thewhaleside.com and i would like to hide the default mask appearing when you go hover with the mouse on a featured image of the Portfolio. I would like to replace this transition with a desaturate till saturate transition. So at the beginning all the portfolio featured images must be black and white.

If i have to say from 1 to 10 my CSS knowledge, i would say 4, but still i’m not sure which class i ve to edit and i’m not really familiar with transitions..

After all that, i will put a shadow to the text of each portfolio element, so it will be readable. But i think i’ll be able to manage that later.

thank you and i hope you’ll help me with this!

Have a great day!

[ilmattiapascal]

Houston do you copy ? ……………………………………… Houston do you copy ?

;-)

[ahmetsali]

Hi, you can try this custom css code;

.media-box .mask {
    background: none;
}
.media-box img {
    -webkit-filter: grayscale(100%); filter: grayscale(100%);
}
.media-box:hover img {
    -webkit-filter: grayscale(0%); filter: grayscale(0%);
}
.media-box .mask .portfolio-info {
    text-shadow: 1px 1px 1px #333;
}

sorry for the delay :)

[ilmattiapascal]

thanks it worked, just one more thing…how can i add a slower transition from 100% to 0% ? say 0.4s for example ;)

thanks!

[ilmattiapascal]

no problem i did it. Thank you Houston ;)

[ahmetsali]

you are welcome ;)