Images changing layers when mousing over them

[Ja Di ksw]

Hi all. I'm trying to build my first website (yeah, I know), and had a question about making the images interactive. I wanted to have a corner of the page have some images placed haphazardly around, kind of as if they were 4x6 prints in a messy pile. When the viewer mouses over them, I wanted whatever image they were over to be the one on the top layer, to no longer be "under" the other pictures. Any advice on how to do this (or, really, on starting a website for the first time since I'm just fiddling around with iWeb)?

That's where I'm starting, and would be definitely happy with someone just answering that. If anyone wants to explain a little further, I would also like the pictures to grow a tiny bit in size when moused over, and possibly have some semi transparent words appear above them (such as: Animals, Vacations, etc) as each picture is going to be a link to a page with more like it.

Thank you in advance, I'm sure I will have more questions later!

 

[angelwatt]

You'll be hard pressed to accomplish this with iWeb. What you want will require setting up some custom CSS and potentially JavaScript. iWeb doesn't really let you do that in an easy manner.

Adjusting what image is on top is a simple matter of adjusting the z-index property for the image and setting that to happen for the :hover pseudo selector. Adjusting the size can be done through a combination of setting the image height/with to say something like 110% and making use of relative positioning. Again, this is stuff you're really not going to be able to do easily with iWeb.

 

[Ja Di ksw]

Thank you for the helpful info . Guess it's time for me to start learning CSS.