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
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).
Then you did it wrong. Show us your .muse file and we show you the error!
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.
You can see that the logo gets slightly bolder. That is because the rollover image is appearing from behind.
Give us the .muse file (–> Dropbox, CC Files). We can’t evaluate a screenshot.
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
Create a shape (rectangle shape tool)
The fill in the shape with one normal state image and one rollover state image
and bingo? Right?
Yes. But why not looking into my sample file? It doesn‘t bite you, I promise!
No I have.
That's what I got from it.
It's exactly what I was looking for.
Is it possible to add transition effect to this?
Contrary to belief, you don't need 2 images. 1 image with the CSS grayscale filter is all that's required.
<title>Image Fade In Color on Hover</title>
<img class="logo" src="http://lorempixel.com/400/200/" alt="placeholder">
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.
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>
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?
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.
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.