SharePoint 2013 Zurb Foundation Publishing site tips

Advanced Banner


Tabs



Hover over image display
<h4>Executive Directors</h4>
<style>
#tooltip1 { position: relative; }
#tooltip1 a span { display: none; color: #FFFFFF; border-style: inset; border-color:#FFFFFF;  }
#tooltip1 a:hover span { display: block; position: absolute; width: 150px; background: #aaa url(/PublishingImages/150x230/pbeck.jpg); height: 224px; left: 300px; top: -40px; color: #FFFFFF; padding: 0 0px; z-index:1; }
#tooltip2 { position: relative; }
#tooltip2 a span { display: none; color: #FFFFFF; border-style: inset; border-color:#FFFFFF; }
#tooltip2 a:hover span { display: block; position: absolute; width: 150px; background: #aaa url(/PublishingImages/150x230/rlarkin.png); height: 224px; left: 330px; top: -40px; color: #FFFFFF; padding: 0 0px; z-index:1; }
</style>
<ul>
<li id="tooltip1"><a href="#">Paul Beck, Chief Executive Officer<span> </span></a></li>
<li id="tooltip2"><a href="#">Richard Larkin, Commercial and Strategy Director<span> </span></a></li>
</ul>