Image Colour Change or Image Change on Roll Over

Report · Jun 05, 2019

Hi Guys.

Did do some looking around the forums because I am sure people have asked for something similar. But I didn't seem to find it.

What I want to do is two thing. One is shown in this sample here VeryPC | Technology is our business . If you scroll right to the bottom you will see the company logo. It is in grey but when you hover over it, it shows the actual colours of the logo. I know that in normal or old school web coding this was achieved by creating 2 images. One is like a colour logo and the second is the original and when the mouse hover it will switch between the two images. So I want to achieve something like this. Maybe in Muse there is a overlay feature which colours the logo in grey (maybe) but on rollover it fades away to reveal the actual image (logo).

Any recommendation is much appreciated.

Report · Jun 05, 2019

This effect is easy to achieve in Muse:

There are some ways to create this color shift. Here are two of them:

Use different fill images in different states. (top example in the screencast):
Use different „effects“ (inner glow) per state (Bottom image in the screencast). Attention: This only works with PNG images!

Here you may download the example .muse document: https://www.dropbox.com/s/q3127xl4snmbrm1/color-shift-on-hover.muse?dl=1

Report · Jun 05, 2019

I actually did try the image file option before I wrote here but didn't get a good result.

What was happening was, the roll over image underneath could be seen slightly which was causing an outline around the image that I used on normal state (the grey version of the logo).

Report · Jun 05, 2019

Then you did it wrong. Show us your .muse file and we show you the error!

Report · Jun 05, 2019

Maybe but I just tried again after this message. And when I tried the logo is appearing below.

Here is how I set it up.

No Hover

With Hover

You can see that the logo gets slightly bolder. That is because the rollover image is appearing from behind.

Report · Jun 05, 2019

Give us the .muse file (–> Dropbox, CC Files). We can’t evaluate a screenshot.

Report · Jun 05, 2019

Here you go Gunter WeTransfer

Report · Jun 05, 2019

Did you really have a close look at my sample file? Don’t think so.

The solution of your issue:

Delete the placed images within both image frame so that only the frames are left and assign the correct images as a Fill only use image fills and no placed image in the frame! You may use simple rectangles (scaling proportionally) as well.)
The logo to the right: Go to „Rollover“ state, open the „Fill“ panel and set transparency to 100 %. Otherwise nothing will be shown. Now assign the correct fill images.

Here your modified sample file: https://www.dropbox.com/s/a6qq121qdheo5jd/Hover-color.muse?dl=1

Report · Jun 05, 2019

Ok so,

Create a shape (rectangle shape tool)

The fill in the shape with one normal state image and one rollover state image

and bingo? Right?

Report · Jun 05, 2019

Yes. But why not looking into my sample file? It doesn‘t bite you, I promise!

Report · Jun 05, 2019

No I have.

That's what I got from it.

It's exactly what I was looking for.

Thank you.

Is it possible to add transition effect to this?

Report · Jun 05, 2019

Contrary to belief, you don't need 2 images. 1 image with the CSS grayscale filter is all that's required.

<!doctype html>

<html>

<head>

<title>Image Fade In Color on Hover</title>

<style>

img.logo {

filter: gray;

-webkit-filter: grayscale(1);

filter: grayscale(1);

opacity: 0.7;

transition: 1s;

}

img.logo:hover {

-webkit-filter: grayscale(0);

filter: none;

opacity:1;

}

</style>

</head>

<body>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jun 05, 2019

Nancy, you make me laugh … The technique, I described, is way(!) faster to build! And tell us: How should the thread opener use your code snippet in Muse? And tell us: Why should he use it? Or better: Don‘t tell us, please don‘t!

I have no idea, what drives you, to post such funny things over and over again in the Muse forum. But we all know: It is much simpler to dropping some lines of useless code into the forum instead of trying to solve an issue using the means of Muse. And yes, we know, that Muse is End Of Life. Nevertheless the question of this thread deals with Muse and „expected behavior“ in this forum is, trying to solve Muse problems.

Report · Jun 05, 2019

Anybody who wants to remain in this profession longer than 6 minutes had better learn something about code. And basic CSS and HTML tricks like this are a fun way to get started.

Incidentally, CSS goes into your custom <head> tag.

HTML goes into your <body>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jun 06, 2019

Just to remind you the reason Muse was created. Muse was created for Designers not Coders. The way I can design something is probably at the same speed as you trying to code something. But you designing is probably at the same speed as me coding. I do know coding aswell but why write the code when I can tick a few boxes to get the code written for me?

Report · Jun 06, 2019

And you think, this „information dropping“ will help the initial poster? You really think this? I’d call this „reality distortion field“.

The issue was solved in a Muse typical way in post 4, before you even found this piece of useless code, which you placed thoughtlessly in post 11 of this thread.

By the way: I’ve done many sites with muse (you not a single one!), and I never needed a single line of code.

Can’t you accept, that there are people out there, who don’t need the newest shiny, blinky eye candy, underlying data base stuctures, distracting animations and such stuff? Muse was built for these people, and you won’t convince a single Muse user by dropping code snippets onto his feet. But: It makes no sense to discuss this with you. This won’t stop your to delight us with your always very-same postings. It seems, your „raison d’être“ in this forum is annoying and confusing its members.

Report · Jun 06, 2019

Also Günter Heißenbüttel one last question. If I drop an AI file into Muse, when I publish the website to the web, will Muse save the AI files into PNG for me or will it stay as AI?

Report · Jun 06, 2019

A placed .ai graphic will be outputted as a .svg graphic and a .png image as a fallback for browsers, which don’t support the SVG format. In short: AI is exported both as SVG and PNG.

Adobe Community

Image Colour Change or Image Change on Roll Over

1 Correct answer