If you give a background to an inline box with the dimensions carefully created to fit the box as a pass-through, and set up all the background parameters so that the image will shrink and expand (H center, V center, tile Neither, size Cover), it will stay the size you intended if you size the box height to match the image height. BUT if you specify the inline box height as flexible, the box height jumps (in the case shown by 4 pixels) and the image expands in both dimensions and I think gets a bit blurrier as a result.
You can see this in play at the linked page. On the left is a plain old rollover, on the right is one that uses the background image of the containing box and an inserted image as the rollover. I think the zoom effect is kind of nice, but why would Freeway be set up to display pass-through images at a slightly larger size than they are?
Turns out this expansion of a background doesn’t happen if you use an svg file. I added an example to show the difference in the linked example. And of course the type is sharper on the rollover caption.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I looked at your middle example and have this to say:
The effective height of the image and the container with the background-image applied are 4px different. You would have to force the container height to 294px to prevent the visual “wobble”.
BUT…
Instead of making the hovered image appear over the background image, you can set both images on the container’s background:
Hi Peter,
Looking at your example page I can see that the paragraph tag that wraps the image forces the panel height to become too large. Setting the font size on the paragraph to zero will correct this;
font-size:0
If you are looking to add captions to your images it may be worth using HTML text so that the content will get trawled by search engines. Take a look at the Sliding Captions example on Freeway Style (http://www.freewaystyle.com/sliding-captions/) for one way to do this.
Regards,
Tim.
On 3 Sep 2015, at 20:05, Peter Laundy wrote:
You can see this in play at the linked page. On the left is a plain old rollover, on the right is one that uses the background image of the containing box and an inserted image as the rollover. I think the zoom effect is kind of nice, but why would Freeway be set up to display pass-through images at a slightly larger size than they are?
Setting the font size on the paragraph to zero will correct this
Yup! Thanks for letting me in on the vagaries of FW div code
Another possible option is to apply the Remove Paragraph Tags Action
I see this was done back in FW4 days and is presented as in beta. Should I worry of unintended consequences in using this in 2015 with FW7?
it may be worth using HTML text
Would love to, and have been trying to adapt what you linked me to flexible inline construction, and can’t get an html caption superimposed over an image to have the image show up behind the caption and have the caption appear.
Had the same problem with using stacked rollover images. Couldn’t get the transparent one on top to superimpose on the opaque one below. The fifth version on the attached is as far as I got, which was before applying the CSS to apply opacity and movement to the caption. Note that I tried using a contained photo as well as a background to the containing div (which is what is shown) and it had the same problem.
This was done some time ago - before Responsive was a buzzword - but I am sure it could be doable in your use case.
D
Dave. Thanks for this. Is there a Freeway file of this I could look at to see how significantly it differs in its approach? Am not yet at the level I can construct something straight from the code. Looking at it, both approaches use the hover modification to the non-hover style to achieve the effect.
When I replied about using :hover pseudo-style to change the background image-- instead of the original trick of placing an image <img> over a background-image-- I started a small example.
It’s all very flexible, built using inflow methods. I added in real-text panels using the CSS transition property to reveal them. This makes the background rollover unnecessary, so I changed that to a simply visual effect instead.
I think all this revealing strategy is nicely decorative, especially in browsers. However, I am beginning to doubt how effective it will be for mobile browsers.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Wow! Have never seen a FW file so dense with actions and styles. I think I am going to learn not only about how to achieve the effect I was looking for, but also about highest and best use of FW.
Thank you for making and sharing this, Ernie!
And yes, one can’t use the effect on essential info as, at least now, there is no way that I know of to make this accessible to mobile users and clickable through to the target URL. I was hoping the tactile pressure sensors that Apple developed for the watch would allow separate hover and click states for touch screens, but it sounds like that is not how they, at least, are planning to use it.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I would not count on Apple using a hidden state like “force touch” to simulate mouseovers on iOS. For one thing, it would only apply to a subset of users, and Apple doesn’t roll that way. For another, it would be important information hidden unless you knew the secret, and that’s just a poor user experience. If the information is important enough to put on the page, then make it visible.
Walter
On Sep 5, 2015, at 9:08 AM, Peter Laundy email@hidden wrote:
Wow! Have never seen a FW file so dense with actions and styles. I think I am going to learn not only about how to achieve the effect I was looking for, but also about highest and best use of FW.
Thank you for making and sharing this, Ernie!
And yes, one can’t use the effect on essential info as, at least now, there is no way that I know of to make this accessible to mobile users and clickable through to the target URL. I was hoping the tactile pressure sensors that Apple developed for the watch would allow separate hover and click states for touch screens, but it sounds like that is not how they, at least, are planning to use it.
Wow! Have never seen a FW file so dense with actions and styles. I think I am going to learn not only about how to achieve the effect I was looking for, but also about highest and best use of FW.
Thanks for the compliment. I have a peculiar way of using Freeway to deliberately create as much of the specific code that I want instead of letting it just generate whatever code on its own. I want the code to look as professional as any other part of the site, but I am also lazy and if I can get Freeway to do much of the work for me then I am happy on all accounts.
Not everyone works as I do… Thomas might look at my code and lament the excessive number of div elements that I use-- and I would be first to agree with him. I really should do something about that. I’m sure to figure it out sooner or later.
There are very few actions used in this example, really. One action-- Anonymous-- is used a lot, which I suppose makes the workspace look very actionized. Instead of letting Freeway describe every object by its ID tag, I prefer to use classes to build description for common or shared styles. So instead of a dozen CSS ID style definitions which are exactly the same… instead I apply one CSS Class style definition to a dozen items-- which I think is much more efficient and professional. Also, I can build unique appearance by applying multiple classes like they were a recipe.
I am using inflow layout techniques… something well worth learning whether you choose to work like me or not. The instant benefit is flexibility – something which bodes well for responsiveness. For example, this small workbench project is responsive only with a minimum of input in Freeway’s Style Editor (love the disclosure triangles).
Which reminds me, I’ve updated my example to reflect some of Walter’s advice on how this whole effect might play out on iOS browsers.
Not everyone works as I do… Thomas might look at my code and lament the excessive number of div elements that I use-- and I would be first to agree with him. I really should do something about that. I’m sure to figure it out sooner or later.
LOL
nothing wrong here cause I’m convinced that I even use one DIV more. I’m the one infected by DIVITIS perhaps.
But indeed I admire your patience. Your patience creating styles via name/value (however I learned from you how to shorten this process). Long started to go other ways in this - but as you already said:
We both have our own (similar) way to do, cause we mainly talk about the result - not the way getting there.
There are very few actions used in this example, really. One action-- Anonymous-- is used a lot,
Here I do the “ID2Class” action, cause it’s kind of advanced. You can even add there additional classes without calling the extended styles dialogue.
In theory, I like your approach from both a clean code and a streamlined organized workflow perspective. Am looking forward to finding out what it is like in practice.
Also thanks for the clear description of what the Anonymous Action does (glad it is nothing to do with enabling illicit activity). The description on ActionForge and the conversations I found on Freeway Talk about it were pretty opaque.
And thanks for the updated version.
Peter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
There are very good reasons why a WYSIWYG editor uses IDs and there are much more reasons why actions like Anonymous and ID2class styles are undocumented. It’s just because you need to know what you are doing.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at: