[Pro] Inline Rollovers

I’ve been doing research online , reading instructions like Caleb Grove’s on his page here: http://getbackdraft.com/docs/rollovers but I seem to be having trouble constructing a rollover in my box model/inline layout. I’m trying for a simple effect of having a semi-opaque html item obscure the image in the normal state, to allow the html text to be legible like in the example site included. However, I’m a bit stymied by the construction issues of placing layer items (for the rollover states) inline since my hover state will include both a background and text, which Caleb doesn’t necessarily address in his short instructional.

Thoughts on how best to do this within Freeway? I’m afraid I’m not that great with adding actual code. And I’m just getting the hang of inline construction although I do understand the concept and am making headway.

http://www.juanchavarriajr.com/


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Start with this method to create your Rollovers

http://www.deltadesign.co/fw_examples/fwactions/rollover.html

But instead of 1 use

1 Insert an Html item and import your ‘normal’ state image - make sure it is pass-through and has a % width.

Result: http://deltadesign.co/FW7Test/responsive-rollovers.html

Note that your Rollover image would be a composite of the image and text.

There are other methods.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:

On 14 Jan 2016, 8:03 pm, DeltaDave wrote:

Note that your Rollover image would be a composite of the image and text.

Thanks David, that was very easy to follow and I actually referenced it in my research because you had responded with that example to a similar thread.

But like you mentioned, the text would have to be part of the graphic, and I’m trying to find a way to do the text as html text separate above the image, so that I can modify it. For example, I might want it to be larger at the mobile phone breakpoints, and if I integrate it into the image, it will be limited to whatever it scales to.

Any idea how to accomplish that in an inline set up?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Any idea how to accomplish that in an inline set up?

Sure but you said “I’m not that great with adding actual code.” so I didn’t offer a more complicated example that requires javascript.

Here is something similar http://www.deltadesign.co/fw_examples/CSSstuff/slcaption.html - not a responsive version though.

Again - not responsive but similar http://www.deltadesign.co/fw_examples/fwactions/fx-slideup.html

And you could just use CSS effects but if you dont want to add code…

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

George… I just want to point out at this stage of the discussion that there is a huge difference between talking about 1 lone tile versus a row of tiles. A row of tiles will make you want to make them all the same height-- AND responsive. That’s not impossible, but a much taller order than you might realize.

This often happens when trying to reconcile visual design with practical engineering.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

On 14 Jan 2016, 8:52 pm, DeltaDave wrote:

Any idea how to accomplish that in an inline set up?

Sure but you said “I’m not that great with adding actual code.” so I didn’t offer a more complicated example that requires javascript.

Here is something similar http://www.deltadesign.co/fw_examples/CSSstuff/slcaption.html - not a responsive version though.

Again - not responsive but similar http://www.deltadesign.co/fw_examples/fwactions/fx-slideup.html

And you could just use CSS effects but if you dont want to add code…

D

Yeah, I was hoping to find a way that was all native to Freeway, since I couldn’t figure it out on my own and was wondering if I was missing an appropriate action or technique. It’s been a while since I put together a FW site.

A friend suggested a method that involved the extended markup dialog and adding some CSS, but I thought I’d put it out there to see if I missed any other codeless methods.

I appreciate all the suggestions, though.

On 14 Jan 2016, 9:20 pm, The Big Erns wrote:

George… I just want to point out at this stage of the discussion that there is a huge difference between talking about 1 lone tile versus a row of tiles. A row of tiles will make you want to make them all the same height-- AND responsive. That’s not impossible, but a much taller order than you might realize.

This often happens when trying to reconcile visual design with practical engineering.

Yeah, I had just figured out the responsive layout and my rows, and gotten them to work when I started working on the mouseover effects. Then I realized the inline construction was at odds with the Rollover Action’s methodology.

If the answer is that Freeway isn’t equipped yet to create that kind of an effect on its own, then code /CSS it is…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I spent some time working on this, which is good in that you really get to see some of the things you come up against when testing a cool new design concept.

For example, and this is evident in the original post’s example, what is supposed to happen on iOS devices… the prime reason we have Responsive design? There is no easy way to get a touch device to reveal the hidden text (no hovering) so the reveal is only for desktops (well, laptops too but I think we can all agree they are all the same thing now, right?)

In the original example, the whole tile acts like a link to a page about the image. The iOS crowd is expected to just divine how that works-- which I suppose is an arguable expectation. I guess that non-tech-savvy users are the new legacy Windows browser users and we can get away with ignoring them too.

Couple that with the way the image tiles are presentationally devoid of text in the first place, and you can see that search engine friendliness begins a page further on. I suppose that is not completely horrible as every page is a landing page to a search engine.

None of this actually invalidates the showy nature of image tiles… I think it only underscores the difficulties they present when using them.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi all Im trying to do the exact overlay rollover in my responsive grid like this example

http://www.juanchavarriajr.com
any advice?

thx


freewaytalk mailing list
email@hidden
Update your subscriptions at:

any advice?

Think carefully how you want to present the same page to devices that have no Mouseover event - once you have made that decision then decide how much under the hood work you want to do because there might be plenty.

This particular site is a Squarespace one - and uses one of their themes to give you these effects - not easy to replicate.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

ok thx David

I think Exhibeo will add this to the new gallery option but I’m not sure

I just want the rollover to hover image on my grid with the title of the photo series with a link…

ah well Ill have to look around thx


freewaytalk mailing list
email@hidden
Update your subscriptions at:

On 2 Apr 2016, 7:38 pm, Carla wrote:

Hi all Im trying to do the exact overlay rollover in my responsive grid like this example

http://www.juanchavarriajr.com
any advice?

thx

Hi Carla

I’ve just seen this thread and thought I’d chime in. I’ve just completed a micro site in FW7 that features what I think you’re after http://www.thewoodlife.org/furniture-design.html scroll down the page to the small image boxes and mouse over. Any good?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi Dave
thx for chiming in… thats very nice, but I only want to have text pop within the image container, not a new window…
but yours looks very nice
thx


freewaytalk mailing list
email@hidden
Update your subscriptions at:

On 12 Apr 2016, 6:16 pm, Carla wrote:

Hi Dave
thx for chiming in… thats very nice, but I only want to have text pop within the image container, not a new window…
but yours looks very nice
thx

Are you viewing it on a phone or desktop? If on desktop you will see a semi opaque dark background with magnifying glass appear signifying that you should click to see a pop up larger image. But on mobile devices, as DD points out, you won’t see the overlay image as there is no mouse over, you’ll just get the pop up.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

right … understood David…thx Ill take a look


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Carla

I’ve just seen this thread and thought I’d chime in. I’ve just completed a micro site in FW7 that features what I think you’re after http://www.thewoodlife.org/furniture-design.html scroll down the page to the small image boxes and mouse over. Any good?

hello Carla,

Hope you don’t mind me cutting in here. I like the effect you have on the small panels. Just wondered what you had used to achieve this?

Many thanks.

Anthony


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options