如何在圖像上方顯示圖標（燈箱縮略圖）？

Question

我有一個看起來像這樣的HTML代碼：

<p>
    <a href="image.jpg" rel="lightbox" title="Image 1" rtekeep="1">
        <img src="image.jpg" />
    </a>
</p>

我現在想使用一個顯示在圖像上的圖標。 我知道使用div並為該div提供背景圖片是很有意義的，但是如果有CSS或jQuery解決方案，我會很高興，因為該HTML代碼在我們的網站上使用了大約200次，因此改變它們每個人都需要很長時間。

Answer 1

您可以使用jQuery append在圖像上方添加圖標。

例：

HTML：

<p>
    <a href="image.jpg" rel="lightbox" title="Image 1" rtekeep="1">
        <img src="image.jpg" />
    </a>
</p>

CSS：

.thumbnail-container{
  display: block;
  position: relative;
  overflow: hidden;
}
.thumbnail-container a{
  display: block;
  width: 100px;
  height: 100px;
}
.thumbnail-container img{
  width: 100%;
  height: 100%;
}
.thumbnail-icon{
  position: absolute;
  top: 40px;
  left: 40px;
  width: 16px;
  height: 16px;
  background-image: url('http://cdn.flaticon.com/png/256/70376.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 99;
}

jQuery的：

$("p").addClass("thumbnail-container");
$("p.thumbnail-container").append( "<div class='thumbnail-icon'></div>" );

小提琴： https : //jsfiddle.net/9md20cws/3/

Answer 2

您可以使用絕對元素來實現。 然后使用left，top，right，bottom設置圖像位置。 像這樣的東西：

p{
/* children in this p are floating in this element instead of body */
    position: relative;
}
p > img {
    position: absolute;
    top : ...;
    left: ...;
}

Answer 3

的CSS

.overlay{
position:absolute;
top:0;
left:0;
font-family:...;
}
.someGenericClass{position:relative}

jQuery的

$(p).addClass("someGenericClass");//you have to target desired p from your page...
var element = "<div class="overlay"></div>"
$(p>a).append(element);

Answer 4

您可以將圖像分為兩部分，然后在懸停時顯示該部分的后半部分， 或者在使用jquery的鼠標輸入上追加。

jQuery的

$(p).mouseenter(function(){
$(this).append('<div class="element"></div>');
});

的CSS

.element {
position:absolute;
top:0;
left:0;
background:url(img.jpg);
}