Joomla Templates Club 406,261 posts

[mazhar shah Friend mazhar shahJoin date: September 2014Posts: 201Downloads:132Uploads:37 Thanks: 37 Thanked: 8 times in 5 posts]

#1079588

The images in the BLOG are greyscale until you hover over them and they are full colour. Looks super. I want to place some images as ‘headers’ on actual article pages and I want them also to be greyscale until someone hovers over them too.

Does anyone know the css class I can add to the images on actual article pages to get this effect. Or I can add a new image class to the custom.css if someone could guide me on the code to add to the custom css file please.

• This topic was modified 7 years ago by  mazhar shah.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1079811

Hi
Here is the code used to the grayscale

.blog .item-image img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.items-leading .leading:hover .item-image img {
    filter: grayscale(0.5);
}

You can use these style and change the name of the classes as per needs.

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. mazhar shah

[Author]

Posts