Showing Hidden Content and Adding Picture Effect using CSS

I have a php-mysql generated page. Which is almost like image gallery having 10*3 table of images.

I wish to add effect to picture.

1. I wish to color the picture frames according to time they were added to database. Like green for data added today, blue for a week old data, 开发者_开发技巧red for a month old data and orange for the rest.

2. I wish to attach a frame to them, which will have both image and some text.

3. I wish the picture to resize itself a bit to show it is in focus and show hidden div text along with previous text.

4. If possible I would like the focus box to show gif instead of jpeg with help of an ajax call.

I have seen example of first three query on some tutorial page but am unable to locate them now.

I can try to work upon fourth query on my own if I get a solution on first three.

Any help is greatly appreciated.

Thanx in advance.

all you need is JQuery. Take a look at its effects and ajax functions. You may be able to implement those effects easily.

http://api.jquery.com/category/effects/ -> Basic effects

http://api.jquery.com/category/css/ -> Manipulating CSS (for attaching a frame or everything on it)

http://api.jquery.com/category/ajax/ -> Great Ajax functions

I hope it will be helpful for you

I think the best way to do this is with PHP.

First check the date when the image has been uploaded and compare it with the current date. In that way, add classes to the images, i.e. for the 1 month old: "imgmonthold" and put the css styles standard in you stylesheet:

.imgmonthold {
    border: 1px solid red;
}

As the above poster said, for the other things you best use jQuery.