I am designing a website that features social media icons spread out horizontally across the page. When a user clicks on one of these icons, I envision a pop-up window appearing below it, displaying additional information. Here is a visual representation of how I would like it to appear after the user interaction.
The entire pop-up window is encapsulated within its own div element.
Instead of manually inputting coordinates for each icon, I am seeking a more dynamic approach to implement this functionality.
Thank you in advance for any assistance you can provide.
The HTML structure:
<div id='inset'>
<div id='icon-gutter'>
<div id='gutter-loader'>
</div>
<div id='icons'>
<img src='images/facebook.png' id='facebook' />
<img src='images/twitter.png' id='twitter' />
<img src='images/google+.png' id='google+' />
<img src='images/linkedin.png' id='linkedin' />
<img src='images/reddit.png' id='reddit' />
<img src='images/tumblr.png' id='tumblr' />
<img src='images/pinterest.png' id='pinterest' />
<img src='images/youtube.png' id='youtube' />
<img src='images/lastfm.png' id='lastfm' />
<img src='images/instagram.png' id='instagram' />
<div id='pop-over-wrap'>
<div id='arrow'>
</div>
<div id='pop-over-body'>
Hello
</div>
</div>
</div>
</div>
</div>
The CSS styling:
#inset {
margin: 0;
padding: 0;
background: url(grey-fabric.png) repeat; /*#001121;*/
height: auto;
max-width: 100%;
position: relative;
padding: 14px 10px 10px 22px;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}
#icon-gutter {
height: auto;
min-height: 43px;
position: relative;
text-align: center;
}
#icons {
opacity:0;
}
#icons img {
height: 95px;
position: relative;
margin: 0 8px;
cursor: pointer;
transition: all .2s;
-moz-transition: all .2s; /* Firefox 4 */
-webkit-transition: all .2s; /* Safari and Chrome */
-o-transition: all .2s; /* Opera */
}
#pop-over-wrap {
padding: 10px;
position: absolute;
width: 200px;
height: 230px;
background-color: white;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
margin-top: 20px;
margin-left: 300px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
#arrow {
position: relative;
background: url(images/arrowup.png) no-repeat;
background-position: top center;
height: 40px;
margin-top: -30px;
}
#pop-over-body {
}