Font Awesome Image Overlay

前端 未结 1 540
北海茫月
北海茫月 2021-02-06 08:28

I\'m currently creating a image gallery (using Zurb Foundation as Framework) and would like to show the zoom icon on image hover (like this example here: http://codepen.io/Twiki

相关标签:
1条回答
  • 2021-02-06 09:05

    I've put a quick JSfiddle together using font-awesome. The CSS is hacked together but demonstrates what's possible. It should give you a starting point to experiment with.

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

    Note: The JSfiddle above uses font-awesome.css called externally from bootstrapcdn.com

    0 讨论(0)
提交回复
热议问题