Overlay Image in HTML

[devianleong]

I want to overlay "New" & "Hot" logo on the product image just like a shopping cart website but I don't know how to do it. Please guide me or help me to modify the code if possible. Great thanks to everyone who try to help me. Really urgent.

This is my html code

<ul class="products">
        <li class="last"><a href="product.html" class="image"><img src="images/img3.jpg" border="0" alt="image" /></a>
          <h3 class="name"><a href="product.html">Product Name</a></h3>
          <div class="price">123.000 €</div>
        </li>
        <li class="last"><a href="product.html" class="image"><img src="images/img7.jpg" border="0" alt="image" /></a>
          <h3 class="name"><a href="product.html">Product Name</a></h3>
          <div class="price">123.000 €</div>
        </li>
      </ul>

This is my CSS：

ul.products li .image {
    display:block;
    background:#fefefe;
    border:1px solid #e3e3e3;
    width:308px;
    height:202px;
    margin:0 0 10px 0;
    text-align:center;
}
ul.products li .name {
    font-size:24px;
    padding:0 0 5px 0;
}
ul.products li .name a {
    text-decoration:none;
    color:#666666;
}
ul.products li .name a:hover {
    color:#999999;
}
ul.products li {
    float:left;
    margin:0 42px 29px 0;
    display:block;
}
ul.products li .price {
    font-size:13px;
    color:#003399;
}
ul.products li.last {/*MOD*/
    margin-right:0;
}

[EvolutionFallen]

Add position: relative; to ul.products li (Line 21).
Then if you add an <img> with class "new" to the appropriate ul.products li element, you can assign position: absolute to img.new, and push it around with top:, right, bottom, or left as desired.

See jsFiddle for example: http://jsfiddle.net/LEt7Y/ (Note I used a <p> element, you can of course replace with an <img>)

[devianleong]

Great thanks to you EvolutionFallen! You solve my problem! Really appreciated.

[EvolutionFallen]

Glad to help. Please mark the thread as "Solved" :-)