Copy link to clipboard
Copied
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.
This effect is easy to achieve in Muse:
There are some ways to create this color shift. Here are two of them:
Here you may download the example .muse document: https://www.dropbox.com/s/q3127xl4snmbrm1/color-shift-on-hover.muse?dl=1
Copy link to clipboard
Copied
This effect is easy to achieve in Muse:
There are some ways to create this color shift. Here are two of them:
Here you may download the example .muse document: https://www.dropbox.com/s/q3127xl4snmbrm1/color-shift-on-hover.muse?dl=1
Copy link to clipboard
Copied
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).
Copy link to clipboard
Copied
Then you did it wrong. Show us your .muse file and we show you the error!
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Give us the .muse file (–> Dropbox, CC Files). We can’t evaluate a screenshot.
Copy link to clipboard
Copied
Here you go Gunter WeTransfer
Copy link to clipboard
Copied
Did you really have a close look at my sample file? Don’t think so.
The solution of your issue:
Here your modified sample file: https://www.dropbox.com/s/a6qq121qdheo5jd/Hover-color.muse?dl=1
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
Yes. But why not looking into my sample file? It doesn‘t bite you, I promise!
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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>
<meta charset="utf-8">
<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>
</head>
<body>
<img class="logo" src="http://lorempixel.com/400/200/" alt="placeholder">
</body>
</html>
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.