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

Similar Threads
thread Thread Starter Forum Replies Last Post
OS X: Star Wars Empire at War - Picture-in-picture GFX Glitch swwack91 Mac and PC Games 7 May 15, 2014 07:04 AM
iMovie 'picture in picture' image size question shuffles Mac Basics and Help 6 Jan 18, 2013 11:48 AM
FREE! BoothPix Create your own photo booth picture and more! chiawen.yang iPad Apps 4 Nov 30, 2012 11:52 AM
FREE! BoothPix Create your own photo booth picture with your own logo and more! chiawen.yang iPhone and iPod touch Apps 2 Nov 28, 2012 03:09 PM
Area 51 UFO for iPhone/iPod Touch - create your own UFO picture LondonIsCalling iPhone and iPod touch Apps 0 Aug 17, 2012 06:38 AM

Forum Jump

All times are GMT -5. The time now is 08:43 AM.

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

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