Member Avatar for landroverthing

Hi everyone,

Is there any snippet of code that can easily put an image in front of another?

I run an on line store that can be seen here at http://www.camelandyak.com

As you will be able to see, it is very graphic based, but for new products, I would like to overlay 'new' in the top corner of that product, so it stands out from the rest? Is this possible??

I look forward to your replies.

  • 3 Contributors
  • 2 Replies
  • 66 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

A few practical, maintainable ways to put a "new" badge over product images — building on 's absolute-position idea and the resources pointed to.

Use a semantic wrapper and a CSS pseudo-element so you do not need extra markup or an extra network request for every product. Add the is-new class from your backend for new items; that keeps templates simple and makes bulk styling easy.

<figure class="product is-new">
  <img src="/path/to/product.jpg" alt="Product name">
</figure>

.product { position: relative; display: inline-block; max-width: 100%; }
.product img { display: block; width: 100%; height: auto; }

.product.is-new::after {
  content: "NEW";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: #e74c3c;
  color: #fff;
  padding: 0.2rem 0.5rem;
  font-weight: 700;
  font-size: 0.75rem;
  border-radius: 3px;
  z-index: 10;
  pointer-events: none;
}

Notes and troubleshooting:

  • Make sure the wrapper is position: relative; otherwise the badge will not anchor correctly.
  • Use pointer-events: none on visual-only badges so they do not block clicks on the product.
  • Prefer text or SVG badges (scales crisply on retina) over PNGs. Inline SVG or a CSS-only badge avoids an extra HTTP request if you only need simple text/shape.
  • For accessibility, do not rely on the visual badge alone: either add a visually hidden label or include aria-label/aria-describedby on the product link so screen readers get the "new" state.

Recommended Answers

All 2 Replies

Member Avatar for Kieran Y5

Try this:

<div style="width: 300px;"><!-- Width of image -->
<img src="" alt="Product Image" />
<div style="position: absolute; left: 0px; top: 0px;">
<img src="" alt="New!" />
</div>
</div>

You should be able to make the adjustments.

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.