字体真棒图像叠加 [英] Font Awesome Image Overlay

问题描述

我目前正在创建一个图片库（使用Zurb Foundation作为框架），并希望在图像悬停时显示缩放图标（如下例所示： http://codepen.io/Twikito/pen/Jeaub ）。但我希望这个图标是一个字体（Font Awesome）图标而不只是一个而是3个可点击的图标..这可能吗？

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/Twikito/pen/Jeaub). But I would like the icon to be a font (Font Awesome) icon and not just one but 3 individual clickable icons.. Would that be possible?

推荐答案

很有可能！

我已经把快速JSfiddle 一起使用font-awesome。 CSS被黑客攻击，但展示了什么是可能的。它应该为您提供实验的起点。

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>

注意：上面的JSfiddle使用从 bootstrapcdn.com

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

这篇关于字体真棒图像叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！