Teevax Kitchen Mock
HTML
<div id="display-frame">
<img src="http://kitchendesigncentersc.new-athena.zencloud.me/teevax-test-bg.jpg">
<img id="guides" src="http://kitchendesigncentersc.new-athena.zencloud.me/guides.png">
<div id="cabinet" class="marker" style="left:10%; top:10%;">i</div>
<div class="info-box" data-feature="cabinet" style="left:11%; top:12%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique dictum efficitur. Nam facilisis orci rhoncus, commodo leo a, scelerisque urna. Nam iaculis finibus lorem non pulvinar.
</div>
<div id="island" class="marker" style="left:53%; top:85%;">i</div>
<div class="info-box" data-feature="island" style="left:53%; top:65%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique dictum efficitur. Nam facilisis orci rhoncus, commodo leo a, scelerisque urna. Nam iaculis finibus lorem non pulvinar.
</div>
<div id="hood" class="marker" style="left:69%; top:40%;">i</div>
<div class="info-box" data-feature="hood" style="left:48%; top:43%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique dictum efficitur. Nam facilisis orci rhoncus, commodo leo a, scelerisque urna. Nam iaculis finibus lorem non pulvinar.
</div>
<div id="sink" class="marker" style="left:32%; top:50%;">i</div>
<div class="info-box" data-feature="sink" style="left:34%; top:45%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique dictum efficitur. Nam facilisis orci rhoncus, commodo leo a, scelerisque urna. Nam iaculis finibus lorem non pulvinar.
</div>
</div>
CSS
#display-frame { position: relative; }
#display-frame img {
width: 100%;
}
#guides {
position:absolute;
width: 100%;
height: 100%;
top:0;
left:0;
display: none;
}
.marker {
position: absolute;
background-color: rgba(255, 255, 255, 0.75);
text-align: center;
line-height: 1;
border: 1px solid #333;
border-radius: 50%;
font-weight: 500;
font-size: 1.2em;
box-shadow: 0 2px 5px rgba(0,0,0,.5);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-top: -21px;
margin-left: -15px;
cursor: pointer;
}
.info-box {
border: 1px solid #333;
padding: 15px;
max-width: 300px;
background-color: rgba(255, 255, 255, 0.75);
position: absolute;
display: none;
}
JAVASCRIPT
jQuery('.marker').click(function(){
var feature = $(this).attr("id");
console.log(feature);
jQuery('.info-box[data-feature="' + feature + '"]').toggle();
});
