悬停时显示图像上的链接

Question

我希望将效果归档为this site

当我将鼠标悬停在图像上时，我想显示一个带有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>

Answer 2

您可以使用CSS

执行此操作

<强> HTML ：

<a href="#"><img src="img_url" /></a>

<强> CSS ：

a {
  position: relative;
  display: inline-block;
}

a:hover:before {
  content: '';
  display: block;
  background: rgba(255, 0, 0, .5); /* your background */
  width: 20px; /* image width */
  height: 100px; /* image height */
  position: absolute;
  top: 0;
  right: 0;
}

SOURCE

Answer 3

你可以通过使用html和css实现这一点。

HTML：

<div class="img-wrap">
    <img src="http://placekitten.com/240/310" />
    <a class="show-on-hover" href="#"></a>
</div>

CSS：

.img-wrap {
    position: relative;
    display: inline-block;
}

.img-wrap img {
    display: block;
}

.show-on-hover {
    display: none;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 0;
    background: url('http://placekitten.com/20/30');
}

.img-wrap:hover .show-on-hover {
    display: block;
}

小提琴： http://jsfiddle.net/HRb4L/

Answer 4

不是最有效的方式，但是，您可以通过以下方式实现它：

HTML：

<div class="thumbnail-parent">
  <img class="thumbnail" src="http://placehold.it/200x200" />
  <div class="badge"></div>
</div>

CSS：

.thumbnail-parent, .thumbnail {
    width: 200px;
    height: 200px;
    position: relative;
    display: inline-block;
}

.badge {
    width: 20px;
    height: 20px;
    background-color: Black;
    position: absolute;
    top: 0px;
    right: 0px;
    visibility: hidden;
}

.thumbnail-parent:hover .badge {
    visibility: visible;

}