フォント驚くばかりの画像オーバーレイ

Question

私は現在、画像ギャラリーを作成しています（フレームワークとしてZurb Foundationを使用しています）。画像ホバーにズームアイコンを表示したいとします（この例のように：http://codepen.io/Twikito/pen/Jeaub）。しかし、私はアイコンが1つだけでなく3つの個々のクリック可能なアイコンではなく、フォント（Font Awesome）アイコンであることを希望します。それは可能でしょうか？

Answer 1

非常に可能です！

font-awesomeを使用してquick JSfiddleをまとめました。 CSSは一緒にハッキングされていますが、可能なことを示しています。それはあなたに実験の出発点を与えるはずです。

<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> 

注：JSfiddleは上記bootstrapcdn.com

から外部と呼ばれるフォントawesome.cssを使用しています