0

I don't think this can be done but would appreciate confirmation either way.

I have a product image on my store that uses code like this, which I cannot edit

<div class="product"><a href="productpage.php"><img id="productimage0" class="productimage" src="images/prod.jpg" style="border:0" alt=" " /></a></div>

That gives me the product image and a link to the information page. What I would like to do is add a graphic on top of that product image showing that it is 20% off this week. I could make just one image with the text included but as the discounts will change I'd prefer to have a more dynamic way of doing things.

I was hoping to do this via css but really don't know how.

I can't alter the source code on the page but can edit the css file.

Thanks for reading

Albrecht

albrecht
  • 1
  • have you tried z-index? – Jorge Y. C. Rodriguez Jun 14 '13 at 07:54
  • see this http://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html may be helpful – Aravind30790 Jun 14 '13 at 07:55
  • Can you use javascript/jQuery? – Kyle Jun 14 '13 at 07:55
  • 1
    @Aravind30790: That's not really too helpful as the OP can't edit the HTML (for whatever weird reason) – Kyle Jun 14 '13 at 07:56
  • @KyleSevenoaks Theoretically I could edit the code but as soon as the software is updated it would be overwritten meaning I'd need to put back the modification each time. I was hoping to avoid that. – albrecht Jun 14 '13 at 08:13
  • If you CAN'T add atleast something into that markup ..then no. Now if your allowed to use javascript I could give you a solution. – Starboy Jun 14 '13 at 08:24
  • Thanks @Starboy -if I need to edit the code the simplest solution may be the one here http://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html - I didn't think this was going to be possible without code edits and I'll now have to decide whether it's worth the hassle or not. – albrecht Jun 14 '13 at 08:34
  • There must be a way to customize your package built into the software, which package are you usinG? – Kyle Jun 14 '13 at 08:34

1 Answers1

0

What about something like this:

http://jsfiddle.net/QHFWf/2/

HTML

<div class="product">
    <a href="productpage.php">
        <img id="productimage0" class="productimage" src="images/prod.jpg" style="border:0" alt=" " />
    </a>
</div>

CSS

.product {
    width:200px;
    position:relative;
    background:eee;
}
.product img {
    width:100%;
    height:300px;
    display:block;
    background:#ddd;    
}
.product img:after {
    content: "20% Off!";
    padding:5px;
    position:absolute;
    top:0;
    right:0;
    z-index:3;
    color:#fff;
    background:#c00;
}
seemly
  • 1,090
  • 10
  • 20