Not technically habitat related, but I am doing it on the habitat theme…ahem…
I’d like to have a page that has a border image surrounding a collection of smaller images. when you haver over any one of those images, it independantly changes into a different image (of the same height and width). And when you click on it it links to somewhere else.
It’s possible i.e. with absolute link positioning (you can stack several images i.e. with z-index, etc.) but it needs some adjusting and testing…
Ok, well I’m having enough trouble getting the images to change when you hover over them (not good for the company programmer!) but I’ve no clue at all on having one image over another!
Well I’ve created the hovering and everything, just need to ask about the overlaying image.
I’ll link to the webpage i’m testing with, that has all my test hovers in the correct formation:
Now how would I go about creating another image that acts basically as a border around all of those, and making all of the white space within that border be gray?
(Basically I want a border image that has lines going down it to make the white space between the images grey)
Glad you figured out the roll over images, regarding the extra image I don’t think you need another image. Personally, I’d set a border and use padding to achieve this (you can also set a background image if you really need it).
For example, adding a black 1px solid border and 6px of padding the images now look like this: http://cl.ly/1i1g1M0N2H0y210w093f
I know this breaks the layout, so the margin / spacing for the individual items needs looking at but this should get you started in the right direction.
The topic ‘Image in image, and onhover change image?’ is closed to new replies.