How to display an icon over an image (lightbox thumbnail)?

Question

I have a HTML code that looks like this:

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

I would now like to use an icon which gets displayed over the image. I know that it would make sense to use a div and give that div a background image but I would be glad if there could be a CSS or jQuery solution, since that HTML code is getting used about 200 times on our website, so it would take very long to change each of them.

Answer 1

You can use jQuery append to add icon over the image.

Example:

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

Fiddle: https://jsfiddle.net/9md20cws/3/

Answer 2

you can do it using absolute elements . then set image position using left , top , right , bottom . something like this :

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

You could split the image into 2 sections, then display the second half of the section on hover or append on mouse enter with jquery.

jQuery

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

CSS

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