Ich erstelle gerade eine Bildergalerie (mit Zurb Foundation als Framework) und möchte das Zoom-Symbol auf Bild-Hover zeigen (wie dieses Beispiel hier: http://codepen.io/Twikito/pen/Jeaub). Aber ich möchte, dass das Symbol ein Font (Font Awesome) ist und nicht nur ein einzelnes, sondern 3 individuell anklickbare Icons. Wäre das möglich?Font Awesome Bild Overlay
Sehr möglich!
Ich habe eine quick JSfiddle zusammen mit font-awesome. Das CSS wird zusammengehackt, demonstriert aber, was möglich ist. Es sollte Ihnen einen Ausgangspunkt zum Experimentieren geben.
<a href="#" title="" class="image">
<img src="http://www.lyricis.fr/wp-content/uploads/2010/04/kickass-film-still-01.jpg" alt="">
</a>
<div class="cn">
<div class="inner">
<a href="#zoom"><i class="icon-zoom-in large"></i></a>
<a href="#download"><i class="icon-cloud-download large"></i></a>
<a href="#comment"><i class="icon-comment large"></i></a>
</div>
</div>
Hinweis: Die JSfiddle oben verwendet font-awesome.css genannt extern von bootstrapcdn.com