[lparker2Participant]

Hi,

How would I set up images in a block grid to be grayscale but change to colour on hover?

[ThaiModerator]

Hi There,

#1 Try adding following CSS under Customize > Custom > CSS:

.grayscale img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.grayscale img:hover{
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

#2 After that adding the CSS class grayscale to the class field of your block grid:

Hope it helps.

[lparker2Participant]

Hi,

I don’t have the option for Class in my version of cornerstone.

[ThaiModerator]

Hi There,

Can you confirm that you are fully updated? (Theme and Plugins)

You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Thanks.

[lparker2Participant]

Hi,

My fault!

Sorry, it was set to automatic updates but hadn’t updated. I will start a new thread for this if I need to but is it possible to reduce the margins more so that I can place an image close to text?

Thanks

[ThaiModerator]

Hi There,

is it possible to reduce the margins more so that I can place an image close to text?

Try adding following CSS under Customize > Custom > CSS:

.home .x-block-grid {
    margin-bottom: 1%;
}
.home .x-block-grid.four-up>li .x-img {
    margin-bottom: 0;
}
.home .x-block-grid.four-up>li {
    width: 24%;
    margin-right: 1%
}

Hope it helps.

[Author]

Posts