Highlighted

Grayscale or css image filters on hover through adding css & html

Explorer ,
Mar 13, 2018

Copy link to clipboard

Copied

Hi,

I'm building a portfolio website and I want the images on it to have a hover effect, where the image is grayscale in its normal state and full colour in hover effect.

It seems pretty straight forward to create this in code, through adding css and html. But how do I do this in muse? Has anyone done it? I don't want to use a widget, but instead add code into the html.

Could anyone please help me with this.

Please don't suggest that I use two images (one grayscale) because the website is already very heavy and I don't want it to take twice as long to load!

Many thanks

Malin

Please don't suggest that I use two images (one grayscale) because the website is already very heavy and I don't want it to take twice as long to load!

This will not affect the load speed. Feel free to use the 2 images. This can only affect the speed of processing the request at the time when you hover over the object. For sites made on the Muse, it does not matter.

But if you want to deal with this with excessive perfectionism, then you can make two images one and just change the position of the image in hover state Instead of adding a second image.

If you still want to use the code, here it is:

<style>

.grayStyle {

  -webkit-filter: grayscale(100%);

  -moz-filter: grayscale(100%);

  -ms-filter: grayscale(100%);

  -o-filter: grayscale(100%);

  filter: grayscale(100%);

  filter: gray; /* IE 6-9 */

  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}

.grayStyle:hover {

  -webkit-filter: none;

  -moz-filter: none;

  -ms-filter: none;

  -o-filter: none;

  filter: none;

  filter: none; /* IE 6-9 */

}

</style>

Views

838

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Grayscale or css image filters on hover through adding css & html

Explorer ,
Mar 13, 2018

Copy link to clipboard

Copied

Hi,

I'm building a portfolio website and I want the images on it to have a hover effect, where the image is grayscale in its normal state and full colour in hover effect.

It seems pretty straight forward to create this in code, through adding css and html. But how do I do this in muse? Has anyone done it? I don't want to use a widget, but instead add code into the html.

Could anyone please help me with this.

Please don't suggest that I use two images (one grayscale) because the website is already very heavy and I don't want it to take twice as long to load!

Many thanks

Malin

Please don't suggest that I use two images (one grayscale) because the website is already very heavy and I don't want it to take twice as long to load!

This will not affect the load speed. Feel free to use the 2 images. This can only affect the speed of processing the request at the time when you hover over the object. For sites made on the Muse, it does not matter.

But if you want to deal with this with excessive perfectionism, then you can make two images one and just change the position of the image in hover state Instead of adding a second image.

If you still want to use the code, here it is:

<style>

.grayStyle {

  -webkit-filter: grayscale(100%);

  -moz-filter: grayscale(100%);

  -ms-filter: grayscale(100%);

  -o-filter: grayscale(100%);

  filter: grayscale(100%);

  filter: gray; /* IE 6-9 */

  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}

.grayStyle:hover {

  -webkit-filter: none;

  -moz-filter: none;

  -ms-filter: none;

  -o-filter: none;

  filter: none;

  filter: none; /* IE 6-9 */

}

</style>

Views

839

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 13, 2018 0
Adobe Community Professional ,
Mar 13, 2018

Copy link to clipboard

Copied

That´s the only way in muse out of the box, to use 2 images. You change between those two, using states for normal-rollover-visited-active. The other way might be with 3rd party widgets.

Feel free to search musewidgets.com.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 13, 2018 1
Explorer ,
Mar 13, 2018

Copy link to clipboard

Copied

Ok, but since you can add html to the page and objects I thought you could add the css coding, and use the graphic styles to apply the class to the object you want the effect on.

So are you saying it's not possible to do this through adding code to the page and to the object, in Muse?

Thanks,

Lin

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 13, 2018 0
Adobe Community Professional ,
Mar 13, 2018

Copy link to clipboard

Copied

I can only say, that it is not possible out of the box as Muse is just for designers.

It might be possible with adding code but for this I have to invite some coders out there, like Pavel Homeriki​ adn Ussnorway​ or anyone who is skilled in coding.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 13, 2018 1
Most Valuable Participant ,
Mar 13, 2018

Copy link to clipboard

Copied

yes you can add a custom css to a graphic style and then use the basic muse parts

or

a skilled coder could make the entire thing in code and add that to a Muse page using the [insert html] tool but understand the reason this isn't in the basic Muse is because it doesn't work in all browsers i.e, some phones/ devices will just ignore your fancy css and there is bugger all you can do about that

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 13, 2018 1
Guide ,
Mar 13, 2018

Copy link to clipboard

Copied

Please don't suggest that I use two images (one grayscale) because the website is already very heavy and I don't want it to take twice as long to load!

This will not affect the load speed. Feel free to use the 2 images. This can only affect the speed of processing the request at the time when you hover over the object. For sites made on the Muse, it does not matter.

But if you want to deal with this with excessive perfectionism, then you can make two images one and just change the position of the image in hover state Instead of adding a second image.

If you still want to use the code, here it is:

<style>

.grayStyle {

  -webkit-filter: grayscale(100%);

  -moz-filter: grayscale(100%);

  -ms-filter: grayscale(100%);

  -o-filter: grayscale(100%);

  filter: grayscale(100%);

  filter: gray; /* IE 6-9 */

  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}

.grayStyle:hover {

  -webkit-filter: none;

  -moz-filter: none;

  -ms-filter: none;

  -o-filter: none;

  filter: none;

  filter: none; /* IE 6-9 */

}

</style>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 13, 2018 3
Explorer ,
Mar 14, 2018

Copy link to clipboard

Copied

Thank you Pavel!!! It works perfectly. It's a shame like ussnormay said it doesn't work in some browsers 😕

It didn't work when I did it because I used .img instead. I'm not a coder but I want to learn and find out what is possible outside of muse, which is why I prefer to do some things this way instead.

Cheers for all the replies

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2018 0
Guide ,
Mar 14, 2018

Copy link to clipboard

Copied

I'm not a coder but I want to learn and find out what is possible outside of muse

It's just fine that you are eager to learn it. The real freedom in web-development and in web design is given only by knowledge of the code.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2018 2