Creating a cross on an image inside an HTML file

Question

I have an image inside my page. After some javascript trigger event I want a cross appear on the image. Image will still be visible but cross will be on top.

What is the proper alternatives for this? (I have similar question here that used HTML5 canvas)

Answer 1

I would create a wrapper for the both the image and the cross, and have them absolutely positioned within the wrapper. The wrapper itself would be fluid within the DOM, but the image and cross would be absolutely positioned so that the cross appears on top of the image. This can be done by setting the wrapper's position property to relative and using absolute positioning on its children.

As for the cross, I would use an image. This way you can set height and width to 100%, so that it will stretch with the wrapper. To control the sizing you would set width/height on the wrapper element, not the images themselves.

HTML

<div class="wrapper">
    <img class="img" src="actual-image.jpg" />
    <img class="cross-img" src="cross-image.jpg" />
</div>

CSS

.wrapper {
    position:relative;
    width: 150px;
    height: 150px;
}

.img, .cross-img {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;
}

.cross-img {
    opacity: 0.5;
}

It's then trivial to show or hide the cross. Here's a jquery snippet:

$('.cross-img').hide();

Here is a jsfiddle demonstrating this: http://jsfiddle.net/J69qR/