Jump to content
Kristine

Layered images with rollovers and links - newbie question

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!

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...