Images changing layers when mousing over them

Discussion in 'Web Design and Development' started by Ja Di ksw, Jun 16, 2009.

  1. Ja Di ksw macrumors 65816

    Ja Di ksw

    Apr 9, 2003
    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!
  2. angelwatt Moderator emeritus


    Aug 16, 2005
    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.
  3. Ja Di ksw thread starter macrumors 65816

    Ja Di ksw

    Apr 9, 2003
    Thank you for the helpful info :). Guess it's time for me to start learning CSS.

Share This Page