Kristine Posted April 17, 2012 Share Posted April 17, 2012 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 More sharing options...
alvo Posted April 17, 2012 Share Posted April 17, 2012 Which image do you mean sorry? James Link to comment Share on other sites More sharing options...
Kristine Posted April 17, 2012 Author Share Posted April 17, 2012 The 'house tour' with the clickable links. Link to comment Share on other sites More sharing options...
eTianbun Posted April 17, 2012 Share Posted April 17, 2012 What does the image do? You ned to explain it, coz some of us use mobile device sometimes, and we cant realy see the effect. Link to comment Share on other sites More sharing options...
Kristine Posted April 17, 2012 Author Share Posted April 17, 2012 (edited) 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 April 17, 2012 by Kristine Link to comment Share on other sites More sharing options...
Kristine Posted April 18, 2012 Author Share Posted April 18, 2012 Anybody have any insight to add?Cheers. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 18, 2012 Share Posted April 18, 2012 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 More sharing options...
Kristine Posted April 19, 2012 Author Share Posted April 19, 2012 Thanks so much. Sounds like a bit of fiddling though fortunately I'm patient. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now