Question

I’m trying to create the following:

Using two images: one as mask (the diagonal lines) and the other the image and text themselves (the mask and image+text are the same size):

..and I just can’t get it done!

I’ve tried all combinations with divs and z-indeces, opacity and background-image.. (should mention I’m noob to html).

Here’s one shot I got at it (with only the mask and an image):

div {
    position: absolute;
    top: 775px;
    left: 0px;
    height: 188px;
    width: 272px;
    background-image: url('grey-out.png');
}

img {
    z-index: 1000; 
}

---

<div></div>
<img src="41_large.png" />

Which just gives the diagonal lines themselves..
Can someone please help me out?
How do I make that "disabled" look combining the (semi-transparent) mask and the div?

Thanks!

Answer 1

This approach works:

<div id="pspThing" class="disabled">
    <img class="disabled" src="https://i.stack.imgur.com/lCTVr.png" />
</div>

#pspThing {
    background: transparent url(https://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
    height: 93px;
    width: 273px;
    border: 1px solid #000;
    margin: 0 auto;
    overflow: hidden;
}
#pspThing img {
    display: none;
    opacity: 0.5;
}
#pspThing img.disabled {
    display: block;
}

JS Fiddle demo

Bearing in mind that there’s no transparency in your striped png (so far as the imgur hosted image is concerned, anyway, so I’m using opacity instead). Also the JS Fiddle demo’s a little more complicated than necessary, so’s I could show the disabled/enabled states.