@odopod/odo-hotspots
Version:
A component which positions and opens hotspots.
35 lines (30 loc) • 1.37 kB
HTML
<div class="odo-hotspot__container" style="width:1000px;height:500px;">
<div class="odo-hotspot" data-position="15,0">
<button class="odo-hotspot__button"><span class="odo-hotspot__icon"></span></button>
<figure class="odo-hotspot__content">
<img src="https://placekitten.com/g/300/169" alt="Look, kittens!">
<figcaption>foo</figcaption>
</figure>
</div>
<div class="odo-hotspot" data-position="55,75">
<button class="odo-hotspot__button"><span class="odo-hotspot__icon"></span></button>
<figure class="odo-hotspot__content">
<img src="https://placekitten.com/g/400/225" alt="Look, kittens!">
<figcaption>bar</figcaption>
</figure>
</div>
<div class="odo-hotspot" data-position="10,56">
<button class="odo-hotspot__button"><span class="odo-hotspot__icon"></span></button>
<figure class="odo-hotspot__content">
<img src="https://placekitten.com/g/500/281" alt="Look, kittens!">
<figcaption>blarg</figcaption>
</figure>
</div>
<div class="odo-hotspot odo-hotspot--left odo-hotspot--bottom" data-position="80,11">
<button class="odo-hotspot__button"><span class="odo-hotspot__icon"></span></button>
<figure class="odo-hotspot__content">
<img src="https://placekitten.com/g/600/338" alt="Look, kittens!">
<figcaption>honk</figcaption>
</figure>
</div>
</div>