Highlighted

Image Colour Change or Image Change on Roll Over

Community Beginner ,
Jun 05, 2019

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:

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

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

Views

392

Likes

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

Image Colour Change or Image Change on Roll Over

Community Beginner ,
Jun 05, 2019

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:

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

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

Views

393

Likes

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
Jun 05, 2019 0
LEGEND ,
Jun 05, 2019

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:

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

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

Likes

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
Reply
Loading...
Jun 05, 2019 1
Community Beginner ,
Jun 05, 2019

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

Likes

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
Reply
Loading...
Jun 05, 2019 0
LEGEND ,
Jun 05, 2019

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jun 05, 2019 0
Community Beginner ,
Jun 05, 2019

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.

Likes

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
Reply
Loading...
Jun 05, 2019 0
LEGEND ,
Jun 05, 2019

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jun 05, 2019 0
Community Beginner ,
Jun 05, 2019

Copy link to clipboard

Copied

Here you go Gunter WeTransfer

Likes

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
Reply
Loading...
Jun 05, 2019 0
LEGEND ,
Jun 05, 2019

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:

  1. 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.)
  2. 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

Likes

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
Reply
Loading...
Jun 05, 2019 0
Community Beginner ,
Jun 05, 2019

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?

Likes

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
Reply
Loading...
Jun 05, 2019 0
LEGEND ,
Jun 05, 2019

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jun 05, 2019 0
Community Beginner ,
Jun 05, 2019

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?

Likes

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
Reply
Loading...
Jun 05, 2019 0
Adobe Community Professional ,
Jun 05, 2019

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>

Nancy O'Shea, ACP
Alt-Web.com

Likes

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
Reply
Loading...
Jun 05, 2019 0
LEGEND ,
Jun 05, 2019

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.

Likes

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
Reply
Loading...
Jun 05, 2019 0
Adobe Community Professional ,
Jun 05, 2019

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>

Nancy O'Shea, ACP
Alt-Web.com

Likes

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
Reply
Loading...
Jun 05, 2019 0
Community Beginner ,
Jun 06, 2019

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?

Likes

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
Reply
Loading...
Jun 06, 2019 0
LEGEND ,
Jun 06, 2019

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.

Likes

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
Reply
Loading...
Jun 06, 2019 2
Community Beginner ,
Jun 06, 2019

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?

Likes

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
Reply
Loading...
Jun 06, 2019 0
LEGEND ,
Jun 06, 2019

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.

Likes

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
Reply
Loading...
Jun 06, 2019 1