[Pro] FW7-Image opacity when scrolling over fixed background

Can anyone tell me how to have my images 100% opaque, whilst retaining 90% opacity for the background. I’ve tried everything I can think of. Maybe it’s not possible?

You can see the problem here : http://test-1.grantsymon.com/prints.html

(As an aside … I’ve asked support and am awaiting a reply, but if anyone can tell me how, on the same page, I can prevent the horizontal image from overlapping to the right of the white background area, when the browser window is re-size/narrowed (just before the break point) I’d be very much obliged. The hours just slip away as I blindly fiddle with the myriad settings and so far, no luck.)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ahmm - I tend to say, you can’t cause the top parent item inherits the opacity property to all child-items (not only the image btw).

One solution would be to create a tiny png with the wanted color/transparency and apply them as tiling background-image to the parent items (such as Header, Body1 …).

Another method goes a bit deeper into css and means, that you have to deal with rgba colors.
You would detect your wanted color in rgb (rather than hex-value) and have then the possibility to add the opacity with the last value).

For example:

background-color: rgba(0, 0, 0, 0.4);

Once you got it, select the item and hit extended, choose the DIV-Style tab and enter (without any quotes) the name background-color and the value rgba(0, 0, 0, 0.4)

Downside of this method:

You can’t see it in the workspace - only in preview mode.

Upside:

You can leave your current layout (hopefully) in order to “simulate” the final result.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And for the lazy ones, there’s an action for that: CSS3 RGBa Backgrounds - ActionsForge


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yeah - that’s true (never used those actions - don’t trust them due outermost missing vendor prefixings)

And to correct myself:

Don’t leave it as is - and give the background some solid color (without reduced opacity) if you go the hand hacked way :slight_smile:

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I never use those actions as well, I’d stay with the Extended style option :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

but this one I have to keep in mind … apparently it works in FW7 btw, so worth to upgrade the compatibility mode on ActionsForge (Max if you’re in).

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you fellas!

I’ve tried the Action, but it doesn’t do anything. (I tried both). Maybe they need to be upgraded to work in FW7? Of course, there’s no documentation so I could be doing it all wrong, but I tried as many variations as I could think of.

I’ll see if I can understand and apply your instructions Thomas. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Also curious to know …

On the ‘home’ page of my site, there is a layered graphic slideshow using the ‘Target Show/Hide Layer’ action. The background does not show through in this area. The site is based on the Floral template. Is there a trick being done here that I could apply to the images on the ‘prints’ page?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It definitely works, I just tried it.

Select DIV #Header, remove all the inspector settings done (opacity and color in the pen tab), apply the action to it and choose in the color picker this light-grey which you applied to the inspector for both. Play with the opacity in the action.

IE compatibility mode up to your liking.

Preview (or upload)

Repeat this for all other items.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thomas, in Extended I have and

I tried entering :

background-color rgba(0, 0, 0, 1)

in for solid black, but nothing happens when I preview in the browser. :frowning:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 23 Sep 2014, 2:52 pm, Thomas Kimmich wrote:

It definitely works, I just tried it.

Select DIV #Header, remove all the inspector settings done (opacity and color in the pen tab), apply the action to it and choose in the color picker this light-grey which you applied to the inspector for both. Play with the opacity in the action.

Thomas,

am I supposed to apply the action to the image item or to the header/body part?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK Belay that last question … it’s the header part.

All working splendidly. That you chaps!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Header, Body1 and Footer you applied a background-color and reduced the opacity, right?

If so - remove all this - and yes, the action, as well as the extended dialogue are for those 3 items.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I never use those actions as well, I’d stay with the Extended style option
:slight_smile:

There is one thing that would make me give up using the Extended style
definitions - actually having these as features of the app. Not Actions or
add-ons - proper features. There’s a world of normal CSS that doesn’t exist
in FWP that should.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options