how to?

i was searching through the net and found this site. how do people do that stuff? anyone know? tutorials would be nice

 

I think it´s just a hover effect, made with JS or css. Not difficult to do

 

Its just CSS. No JS required. It could be done with JS and CSS too, but who needs JS when it could be done only with CSS.

These are just Hover styles where a different image is called on the page which swaps the first one. This could be done in a few different ways depending on the requirements. Sometimes it is a single image which is not displayed completely in the browser. When someone rollovers the image, the hidden part of the image replaces the first part which was displayed previously.

May sounds difficult but very easy with just CSS.

 

any tutorials so i get a better understanding of it working?

 

Reverse engineering

Hit <Ctrl>+U and follow their source code. You will see that those hover links and image samples are being displayed using CSS.

IE: look at the first link and view the original sources:
/images/aeeducation.jpg
/images/aeeducation_btn.jpg

 

ok i will give that a try i guess although i tried to duplicate it using the css that they had and it didnt work

 

You can also do it with one image, just do a background position change, like the basic Joomla template does the button color changes. To see how that is done just look at the template_css.css in the rhuk_solarflare_ii template for the a.mainlevel styling.

 

Google up some CSS rollover tutorials and see how the magic works ^^. I remember when javascript based rollovers were the in thing ^^

 

i know how to do rollover images, thats easy. i was talking about when the images on that site are clicked and the photo pops up and the background fades in a way.

 

The site you posted above is done with CSS... how exactly is beyond my understanding... but if your trying to achieve that same effect, google for something called "lightbox". It is javascript that does the same thing and is much easier to setup.

 

great, thanks i will give that a try

Edit: I found what I was looking for thanks again

 

Or its a roll over image.