顯示在圖像鏈接時徘徊

Question

我要存檔像this site

，當我將鼠標懸停在我想表明與引導圖標鏈接的圖像效果。我使用的引導3.

original image 

when hovered 

我怎樣才能做到這一點？

Answer 1

你可以做到這一點只用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 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：

<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; 

} 

Answer 4

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>