用于包装一个图像的css和该图像中的多个链接

时间:2013-08-15 05:24:35

标签: css

我见过几个这样做的网站,包括weheartit.com,tumblr flipkart。

当我们将光标放在图像上时,它会显示几个额外的链接,例如评论,分享等,但是当点击该图像时,它会转到其他一些链接。

这里有一些我感兴趣的链接,如果有人可以指导这种类型的CSS格式,这将是一个很大的帮助。

将鼠标放在电子优惠等任何优惠上,您可以看到分享图片会覆盖图片

    http://www.flipkart.com/offers?otracker=hp_widget_banner_0_image

转到任何图像,你会看到很好的css效果,一旦光标在图像上方

,就会出现细节
      http://weheartit.com/?page=1

请至少提供一张图片的示例

3 个答案:

答案 0 :(得分:0)

您可以查看this。这个概念称为mouse over/hover effects,您可以在Google上搜索并找到许多类似的例子。

答案 1 :(得分:0)

css-tricks检查以下示例:

Slide-in Captions

答案 2 :(得分:0)

您应该在说明中提供的示例网站中找到代码。对于网站http://www.flipkart.com/offers?otracker=hp_widget_banner_0_image,包含共享内容的div的名称为sharebox

包含sharebox的样式和CSS效果的CSS文件如下: http://img6a.flixcart.com/www/prod/lego-da812168-nogz.css

搜索sharebox并尝试弄清楚他们是如何做到的。