Crossover diagonal lines over an html image

Let's say you have

<div class="container">
      <div class="column">
            <h2>Sub heading</h2>
             <p>blah blah blah blah</P>
             <p><img src="/images/image1.jpg"></p>
             <p>blah blah blah blah</p>


         </div>
</div>

Select allOpen in new window

You have several options. One is to replace the image with the "X" over the image. This can be done manually or via scripting.  Another option would be to make the image a background image and add an "X" image over the background.  

<p style="background-image: url('/images/image1.jpg );" ><img src="/images/Big_Red_X.png"></p>

Select allOpen in new window

And the last option I can think of is to use absolute positioning and have HTML like below and use css to layer the two

<div>
      <img class="bottom_image" src="/images/image1.jpg">
      <img class="top_image" src="/images/Big_Red_X.png">
</div>

Select allOpen in new window

have a look at this
may be useful...

https://jsfiddle.net/HainKurt/bs7q6e38/

html

<div class=divContainer>
  <img src="cat1.jpg">
  <img class=imgCross src="cross.png">
</div>


<div class=divContainer>
  <img src="cat2.jpg">
  <img class=imgCross src="cross.png">
</div>

Select allOpen in new window

css

.divContainer {
  width: 400px;
  position: relative;
}

.divContainer img {
  width: 400px;
}

.imgCross {
  position: absolute;
  top: 0;
  left: 0;
}

Select allOpen in new window

js

$(".imgCross").each(function(){
  var prvImg = $(this).prev();
  $(this).width($(prvImg).width());
  $(this).height($(prvImg).height());
});

Select allOpen in new window

https://jsfiddle.net/HainKurt/bs7q6e38/

Hain that is what I already suggested. But your fiddle is not working.

But your fiddle is not working.

if you click RUN it works...
not sure not if it is not working in first load, will check...

update: I dont see any error/issue...
jsFiddle not running on initial load somehow...
but when you click run, it works as expected...