Member Avatar for 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;
}
  • 2 Contributors
  • 3 Replies
  • 219 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by EvolutionFallen

Dani AI

Generated

A concise, robust pattern that builds on 's fix: place the overlay elements inside the image container so they move and scale with the picture, style the badges with CSS (no extra image files), and handle accessibility and stacking context. This avoids extra HTTP requests, makes the badges easy to restyle, and keeps the clickable area predictable.

A simple markup pattern (place the badges before the IMG so they layer on top):

<a class="image" href="product.html">
  <span class="badge badge-new" aria-hidden="true">New</span>
  <span class="badge badge-hot" aria-hidden="true">Hot</span>
  <img src="images/img3.jpg" alt="Product Name">
</a>

Core CSS ideas: make the image wrapper a positioned container, absolutely position small textual badges, give them a high z-index, and use pointer-events to avoid blocking clicks on the link beneath. Use rem/em or % units (not fixed px) so badges remain proportional on responsive layouts.

.image { position: relative; display: inline-block; }

.badge {
  position: absolute;
  top: 0.5rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.75rem;
  color: #fff;
  background: rgba(0,0,0,0.65);
  border-radius: 3px;
  z-index: 10;
  pointer-events: none;
}

.badge.badge-new { left: 0.5rem; }
.badge.badge-hot { right: 0.5rem; left: auto; background: #e74c3c; }

Troubleshooting tips: if a badge is clipped, check for ancestor overflow:hidden or a transform creating a new stacking context; if links are not clickable, confirm pointer-events on badges; for decorative badges keep aria-hidden="true" and surface product state to screen readers in the product title or with offscreen text; for crisp icons on high-DPI screens prefer inline SVG or an icon font. This approach keeps the solution maintainable and responsive while remaining consistent with the quick fix offered earlier in the thread.

Recommended Answers

All 3 Replies

Member Avatar for 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>)

Edited by EvolutionFallen
Member Avatar for devianleong

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

Member Avatar for EvolutionFallen

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.