When I said I was having trouble “moving” I did not mean physically moving the overlay or child in FW, I meant when I MOUSE OVER on the webpage, nothing slides (moves). I cannot get the rollover effect at all. I do not even see a rollover action applied to yours or mine.
You appear to be missing the styles that make the overlay transparent and then fade it back into view when rolled over. These are ‘.overlay’ and ‘a:hover .overlay’ in the original example and need copying to your new document.
Regards,
Tim.
On 31 Mar 2015, at 13:03, Hoffkids wrote:
Thanks for the reply. I actually did see that point you made about the child (hope i did it right). I then fixed it and still nothing.
Can you check out this page I made for you with only this one instance trying to duplicate.
It includes a picture of my site pane.
I did the .overlay style clicked EXTEND and so saw more code to copy. I did that and a little change but still no effect. Probably because I have not added in the
Make sure that the ‘overlay’ style has an opacity of zero and that the ‘a:hover .overlay’ style has an opacity of one and you should get the same result as the demo file. What you are doing here is setting the transparency (opacity) of the overlay to 0 (completely clear) so that the door icon shows through. When the icon is moused over (the hover state) the opacity of the overlay is set to 1 (100% solid) which will cover the door icon and display your text - hopefully.
Regards,
Tim.
On 31 Mar 2015, at 17:44, Hoffkids wrote:
I need the icon showing first then when mouse over the overlay shows (like yours)
this whole thing is almost worth giving up as these styles “wet” every page of my entire site everytime and is taking me forever to play and get this right.
You should really work this out on a separate document until you are happy with the outcome.
As you have discovered changes to styles affect every page - simply because styles are set on a site wide basis.
Inevitably changing a style in one instance affects the whole site and it can be disconcerting watching your whole site upload every time because of a simple style change.
One of the reasons that we recommend setting up your base styles very early in the document build process.
Seems not worth it
Styles lie at the core of a good site and once you understand what they are all about it will make your whole construction process so much easier.
As a user you are not typical - you are not building sites for others so it seems more of a chore.
Tim, I actually got it to work with the help from you and Dave. Looks pretty good and may need some tweaks.
But before I go forward with a lot of exciting work, I’d like to ask.
I noticed that for my 2 samples I made, when I click on the icon and it brings me to the new page, when I hit the back arrow and COME back to the 2 icons I made, sometimes the OVERLAY (with the text) is showing and not the icon underneath at first, then when I move my mouse it “fixes itself.”
Do you have any idea why? I will have 24 of these so this could be really messy.
In other words, if people were navigating around and they come back to the page with them then instead of seeing the 24 navigation icons it would be some icons, some overlays, etc.
here is my work in progress. They are beneath the article (just ignore that).
Well that’s how the back button in your browser works. If you reload the page with a link to the page (temp.html) then the page will load using the files on the server. if, however, you hit the back button and return to a page you’ve just come from the browser pulls the page from memory and shows you the page you left - rollovers in place and everything. You could try using JavaScript to ‘clean’ a page you thought has been returned to like this but personally I think it would be more trouble than it is worth.
Regards,
Tim.
On 1 Apr 2015, at 06:50, Hoffkids wrote:
In other words, if people were navigating around and they come back to the page with them then instead of seeing the 24 navigation icons it would be some icons, some overlays, etc.
“Make sure that the ‘overlay’ style has an opacity of zero and that the ‘a:hover .overlay’ style has an opacity of one and you should get the same result as the demo file. What you are doing here is setting the transparency (opacity) of the overlay to 0 (completely clear) so that the door icon shows through. When the icon is moused over (the hover state) the opacity of the overlay is set to 1 (100% solid) which will cover the door icon and display your text”
but in Tim’s example, his Overlay allows to see through a little bit to the original graphic underneah. If everything has ‘0’ or ‘1’ opacity, which setting do I adjust to let it bleed thru a little behind my overlay?
The layers below the captions (overlay, overlay1, overlay2 etc) all have a solid black background which obscures the underlying image. Remove this background colour and you should get the effect you are looking for.
Regards,
Tim.
Well Tom, that did it, it seems so obvious when you put it that way.
I should have seen that.
last one.
when I mouse over it fades transition at a nice kind of slow pace (maybe that is the .4 thing) that is good.
When I move my mouse OFF, it is more of a sudden instant transition back to the icon.
How can I slow the 2nd fade like your example? WHich number is the 2nd one?