I am not a web developer, but am trying to learn the basics.

 

I have seen a feature on a couple of websites where they have some pictures and when you scroll over it, or click on it another 'image' slides out and covers the original picture. What is this called?How do you go about doing this?

 

What I am looking to do on my is have a picture saying "find local professionals" and have a search field slide up from the bottom. (Please see the attachments for a better example)

 

The one place I have just found is www.neolay.co.uk - they can be found on the homepage, just below the red banner.

 

I want the image that slides up to have form fields attached so that people can search for professionals via postcode, address, town, product type etc.

 

I am also wondering about how to use a form-to-email function here aswell for another part of the website. I would want an original image, then the banner at the bottom to slide up when clicked/hovered over and then the submitted form field to be sent to my email. How would I do this??

That example uses javascript but it is possible using CSS transitions. For example, something like this. For the form, PHP has a mail function.

 

http://php.net/manual/en/function.mail.php

Edited November 16, 201213 yr by heydanreeves

That example uses javascript but it is possible using CSS transitions. For example, something like this. For the form, PHP has a mail function.

 

http://php.net/manua...nction.mail.php

 

Its a late one! So can you use onclick element on CSS transition (or the javascript)? I want to have something similar to the example, but one where you can click a banner and the transiton image etc. appears.