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
...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
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
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
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
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>
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
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.