0

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;
}
2
Contributors
3
Replies
18
Views
4 Years
Discussion Span
Last Post by EvolutionFallen
1

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>)

Edited by EvolutionFallen

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.