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.
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?
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.
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…
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.
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.
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 Wood Life Furniture Design – each piece a work of art scroll down the page to the small image boxes and mouse over. Any good?
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
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.
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 Wood Life Furniture Design – each piece a work of art 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?