Jump to content

Layered images with rollovers and links - newbie question


Kristine
 Share

Recommended Posts

Hi I'm just learning CSS/HTML (self-taught) and am curious about the process required to achieve something like the image that can be seen on this blog page: http://theletteredcottage.net/our-house/ Any advice/info, and in particular some example code, would be fantastic. As stated, I'm only a newbie so simple explanations with limited jargon much appreciated :-) Thanks so much!

Link to comment
Share on other sites

Oh, sorry. Okay, so there is a background image of a house floor plan. Certain rooms within the floor plan have another image over them (in this case a photograph of the actual room). The images (photographs) are links which also become translucent when rolled over. Does this make sense?

Edited by Kristine
Link to comment
Share on other sites

1) Create outer container, width, height you require, and give it a background-image, and very importantly position: relative,2) Create anchor tags with links, and give these width, height, display: block; and position: absolute;. Now some of the image from the site are of *.png type, which uses transparency give the illusion that master bathroom and laundry room are lapped over the images to the right, when in fact these rooms are part of the main outer container background-image that are showing through the transparent areas of both overlapping right images.3) Apply left: and right properties to anchor tag links to position where you like.4) use pseudo class :hover to apply opacity to anchor elements to render the background image almost transparent when hovered over.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...