Bootstrap:在悬停图像上显示文本

时间:2015-07-08 13:03:27

标签: image twitter-bootstrap hover

我是第一次使用Bootstrap3创建一个网站,并且有一个包含3个图像的页面,这些图像将链接到画廊。这些图像不是缩略图。

我有悬停的替代图像(B + W),所以我的代码当前在悬停时将图像从颜色更改为B + W.

我希望能够在悬停时添加文字叠加层,以便人们知道点击进入图库。所以,我希望在悬停时添加文字到B + W图像。或者,我会使彩色图像不那么透明并添加文字,如果它更容易!

这是我目前的html代码。

<a href="landscapes.html"> <img src="landscape.jpg" alt="Landscape" onMouseOver="this.src='landscapebw.jpg'" onmouseout="this.src='landscape.jpg'" class="img-circle img-responsive"> </a> 

提前致谢。

1 个答案:

答案 0 :(得分:0)

尝试添加title属性:

<a href="landscapes.html" title="yourtext"> <img src="landscape.jpg" alt="Landscape" onMouseOver="this.src='landscapebw.jpg'" onmouseout="this.src='landscape.jpg'" class="img-circle img-responsive"> </a>