Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Feb 7, 2013, 12:43 PM   #1
njmitchel0
macrumors member
 
Join Date: May 2008
How do I create a picture like this?

http://hypebeast.com/2013/2/essentia...-cooke-of-wish

Im trying to create a picture like this where a caption appears when you click on a certain element. Any help appreciated, thanks.
njmitchel0 is offline   0 Reply With Quote
Old Feb 7, 2013, 02:47 PM   #2
jared_kipe
macrumors 68030
 
jared_kipe's Avatar
 
Join Date: Dec 2003
Location: Seattle
Send a message via AIM to jared_kipe
Bounding div with position: relative. Whole bunch of nested elements with position: absolute.

All of those plus icons, and their associated text are the nested (position: absolute) items.

Then they use javascript to hide all the text and display them on hover.
jared_kipe is offline   0 Reply With Quote
Old Feb 7, 2013, 08:49 PM   #3
jared_kipe
macrumors 68030
 
jared_kipe's Avatar
 
Join Date: Dec 2003
Location: Seattle
Send a message via AIM to jared_kipe
Start off easy, then start to make it more complicated.

Code:
<div style="position: relative; background: green; width: 500px; height: 400px;">
<div style="position: absolute; top: 100px; left: 50px; width: 10px; height: 10px; background: blue;">
&nbsp;
</div>
<div style="position: absolute; top: 200px; left: 450px; width: 10px; height: 10px; background: blue;">
&nbsp;
</div>
</div><!-- green div -->
This will make a green box with two small blue boxes inside of it positioned absolutely.

If you don't understand that conceptually, you just need an HTML book.
jared_kipe is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 03:53 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC