hey guys - my 1st post here

im looking for some help, im trying to design a website for my dad's business and lets just say well...my html skills are not the greatest. they're okay but i cant make anything really impressive.

anyway i stumbled across a website which gave me an idea on what to implement into my own site.

im trying to recreate a rollover button but its not like most rollover buttons which immediately change state once the mouse comes over it. its a little more dynamic, it rotates 1 degree, changes colour and enlarges but it doesn't do it instantly..it does it slowly almost like a fade in.

look at the 3 big buttons on this website and roll the mouse over, this is the type of effect im trying to recreate - its like they ease into there actions

example of what im trying to do

i checked the source code of the site and it doesn't contain any .swf files which makes me believe there is no flash involved to do this which is some what of a relief because my knowledge of flash is really not too good.

so yea...any help would be great

Surely, you see it in a WebKit browser, such as Safari or Chrome.
This is what I think triggers it (found in the CSS):
-webkit-transform: scale(1.05) rotate(-1deg);

okay so its css - so ... how could i use that code to trigger my own .png to do the same?

open my page in a css editor and....?

sorry - im a bit of a n00b when it comes to css. i've never worked in the language before

With what program do you normally create your pages? Any text-editor is enough really.
The sample site used it in the CSS for the images upon "hover" and "focus".

To start off with CSS, see the FAQ and CSS reference:
http://htmlhelp.com/reference/css/quick-tutorial.html
http://htmlhelp.com/faq/html/docs.html#about-css

dont laugh! i use iweb 09 for mac os-x so i dont think it reads code,

i can just open up the site within text-edit on mac to view the source. okay i'll try read over those 2 links and see if it makes any sense to me

I already figured you were on Mac too. I've never used iWeb myself, nor do I have a .mac account. I took a quick look, but apparently, there is no way to see the generated source code from within the app.

For that you could download TextWrangler, the free counterpart of BBEdit, at http://www.barebones.com/products/textwrangler/. That better than using TextEdit.

If you have questions about CSS, you can always post them in the forum.

iWeb is okay - its a real basic wysiwig editor...like if you want to make a real quick web page but when it comes to more advanced work like i said and you searched it has no source code editor. the only time you deal with code is when your pasting in web snippets

i'll try out TextWrangler and i'll see how it goes & i'll post back if i have a problem with the CSS coding.

Thanks very much for your time mate

okay im having horrific results when im trying to do this - i published my test page to a folder and i took a look at the files, iweb creates a series of .html's, .css's and script folders etc. which one am i to bring into my editor to edit?

i tried numerous files and when i brought them in i tried putting in that code above

some times i would manage to make the image rotate but not with a rollover, it would just be permanently rotated, other times i ended up rotating the entire webpage by 1 degree.

http://dl.getdropbox.com/u/881304/publishedsite1.zip

thats a link to the files im trying to edit to get this to work - can someone point me in the right direction on what im suppose to edit? like which .html or .css file and where i should be doing it? i opened up a .css file in textwrangler and it showed an option for image editing but it didn't specify which image it would edit and the result was every image was rotated permanently without a rollover effect

Right, that's the trouble wen using WYSIWYG editors. It's ok while you're satisfied with the given capabilities. But, oh boy, when you would like to go beyond... That goes for any of such editors (DreamWeaver included).

Those two index.html files inside and outside the folder) are actually the same, it really comes down to homepage.html and its homepage.css. Only, everything is in positioned DIV's that each have inline styling.

I don't see you having any link, nor the use of -webkit-transform anywhere.
Suppose you'd like to use it on the home image. I made a small page, which you can open in TextWrangler. Then you'll see how it is supposed to be coded to work.


Click to view attachment

okay i've managed to somewhat understand that code - i think i placed the top part in the correct place, the problem now is placing the bottom part of the code into my page.

when i do it i'm able to remove the previous image code and paste in the new code, only problem is setting the new codes layout place.
like...i copied what i believe was the layout code from the original and i tried placing it between <> those things of the new code but the image just kept popping up on the left hand side of the page and it seems to be behind the back ground image.

so im sorry for bothering you, any chance you can check the code again and just explain to me where i would put in the layout code.
i managed to get the image to swell in and rotate 1 degree, in-fact i messed around with it a little, its a little more eccentric. just ignore that part.

but yea sorry again dude! im almost there! unless theres a big step im missing :-(

new code: New Code Test

ie: where do i put this - i believe its the code to determine where my image goes and whether its foreground or background - maybe im wrong

The navigation div you inserted in line 78 puts the home image (with the comment) to the left and behind the dark page area. But, it does work, so you seem to start to understand.

So now, lets edit the content of the div of the original image a bit.
First, comment out line 78:

Then add a link to the original image (which is in the div in the next line), giving it a class, eg "nav":

The CSS would then be:

By giving the link a class, you can avoid that all links will be effected by the transform and only apply it to links with a certain class ("nav" in this case).