悬停时显示图像上的链接

Question

我想像这个站点一样存档效果

当我将鼠标悬停在图像上时,我想显示一个带有bootstrap图标的链接.我正在使用bootstrap 3.

original image

when hovered

我怎样才能做到这一点？

Answer 1

CSS

.main-block {
width:200px;
height:auto;
position:relative;
display:block;}

.main-block img{width:100%; }

.main-block .badge {width:29px;
height:55px;
background:url(images/badge.png) no-repeat 0 0;
position:absolute;
right:10px;
top:0;
display:none;}

.main-block .badge a {display:block;
height:55px;}

.main-block:hover .badge {display:block;}

HTML

<div class="main-block"><div class="badge"><a href="#"></a></div><img src="images/character-render.gif" width="400" height="300" alt="1" /> </div>