• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

How to make it so that when you hover over a picture, it was darkened and the text was highlighted?

New Here ,
Mar 09, 2018 Mar 09, 2018

Copy link to clipboard

Copied

Good evening! I need it to be the same. I know that this is done very easily with the help of an empty composition. But I can not! Please, could you tell me how to do this?

Screenshot_14.png

Screenshot_15.png

Views

333

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
community guidelines

correct answers 1 Correct answer

LEGEND , Mar 10, 2018 Mar 10, 2018

This is doable with responsive pages too!

The basic problem is, that text containers scale differently as images. But it can be done!

Look at this screencast:

Only in the case, that the text reflows into a second line, you may need a new breakpoint. If you use vector text, imported from Illustrator, you won’t encounter these difficulties.

Here the example .muse file: https://www.dropbox.com/s/kysx5mlhl7kknec/dimmed-image-highlighted-text.muse?dl=0​

Try, to analyse the file and ask, if there are probl

...

Votes

Translate

Translate
LEGEND ,
Mar 09, 2018 Mar 09, 2018

Copy link to clipboard

Copied

Watch this file: Adobe Creative Cloud ​

It´s a frame (F), filled with an image.

Above, in the exact same size it´s a text box.

Watch its different states – in normal state its opacity is set to "0" – in rollover to 100%. Feel free to change colour how you like it.

Bildschirmfoto 2018-03-10 um 08.00.54.png

Bildschirmfoto 2018-03-10 um 08.01.07.png

Position of the text itself is defined here:

Bildschirmfoto 2018-03-10 um 08.01.20.png

Like this, unfortunately it is not responsive in fluid width designs. You have to use fixed width breakpoints.

Best Regards,

Uwe

Votes

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
community guidelines
LEGEND ,
Mar 10, 2018 Mar 10, 2018

Copy link to clipboard

Copied

This is doable with responsive pages too!

The basic problem is, that text containers scale differently as images. But it can be done!

Look at this screencast:

Only in the case, that the text reflows into a second line, you may need a new breakpoint. If you use vector text, imported from Illustrator, you won’t encounter these difficulties.

Here the example .muse file: https://www.dropbox.com/s/kysx5mlhl7kknec/dimmed-image-highlighted-text.muse?dl=0​

Try, to analyse the file and ask, if there are problems!

Votes

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
community guidelines
LEGEND ,
Mar 12, 2018 Mar 12, 2018

Copy link to clipboard

Copied

As the position of the text box in relation to the image still changes, I prefer to go with fixed width breakpoints.

Gets you more contol over the layout, if this is necessary.

Best Regards,

Uwe

Votes

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
community guidelines
LEGEND ,
Mar 12, 2018 Mar 12, 2018

Copy link to clipboard

Copied

LATEST

No, it doesn‘t.

If you look at the construction of my sample, you will see, that the text box moves exactly synchronous to the image. The „problem“ is, that the text doesnt shrink, when browser width is reduced. That gives the impression, that the textbox changes its position, but it doesn‘t. If one can‘t compensate this by using breakpoints, SVG text would be the best option.

Votes

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
community guidelines