• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

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

Explorer ,
Mar 13, 2018 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

Views

1.4K

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
community guidelines

correct answers 1 Correct answer

Guide , Mar 13, 2018 Mar 13, 2018

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

...

Votes

Translate

Translate
LEGEND ,
Mar 13, 2018 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

Votes

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
community guidelines
Explorer ,
Mar 13, 2018 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

Votes

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
community guidelines
LEGEND ,
Mar 13, 2018 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

Votes

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
community guidelines
LEGEND ,
Mar 13, 2018 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

Votes

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
community guidelines
Guide ,
Mar 13, 2018 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>

Votes

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
community guidelines
Explorer ,
Mar 14, 2018 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

Votes

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
community guidelines
Guide ,
Mar 14, 2018 Mar 14, 2018

Copy link to clipboard

Copied

LATEST

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.

Votes

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
community guidelines