CODEWITHSUNDEEP
htmlcss
Mikhail
Mikhail

Reputation: 9007

Achieving foreground-image effect

I display a few images of varying width and height, and I'd like to be able to add a class or two, say new or hot that would add small overlay star or something.

Normally this would be solved by making a div with the intended image being the background, but having my images all of unknown size, I'm getting stuck trying to figure out how to achieve this. Current HTML is of structure: <a><img></a>

I'm looking for a CSS feature that doesn't exist:

img.new { foreground:transparent url('/images/new.png') no-repeat bottom right }

I'm really hoping to solve this without databasing my image sizes, and without using javascript. But if you have a JS/jquery approach that's elegant, I'm all ears.

Upvotes: 0

Views: 3054

Answers (2)

Shauna
Shauna

Reputation: 9596

Without knowing more details about your setup, there are a few things that come to mind that you can do:

  1. Use img.new:after (Some Quirksmode info on it.). It does have some browser support limitations, though. If you don't mind that some of the older browsers don't support this, then I recommend this one. I've used it before with nice results (and you could also fall back to JavaScript wrapped in IE conditional comments if you really need to, since IE appears to be the only browser out after the feature that doesn't support it).
  2. If you're not using overflow:hidden, you might be able to set it as the background of either your image, its anchor tag, or even the next parent up. This, of course, depends on your exact design.

  3. Use an absolutely positioned div or span within your anchor tag and display only on anchors with the .new class. So, something like this:

    <a class="new">
<span class="newBanner">
<img/>
</a>

<style>

.newBanner {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}

.new .newBanner {
  display: block;
}

</style>

This last one's kind of rough and will likely need tweaked, but the point is in the styling, specifically the .new .newBanner { display: block; } part. Again, it depends largely on your exact design, so the more information you can give us, the better help we'll be able to give you.

Upvotes: 0

BoltClock
BoltClock

Reputation: 724342

I'm not sure how well this would work for you, but if you can add the class to your <a> element instead of your <img>:

<a class="new" href="..."><img src="..." alt="alt text"></a>

Then you can try adding an a:after pseudo-element positioned absolutely over your <img> and giving it the overlay icon as a background image:

a.new {
    display: inline-block;
    position: relative;
}

a.new:after {
    display: block;
    position: absolute;
    content: '';
    width: /* width of overlay image or anything you choose */;
    height: /* height of overlay image or anything you choose */;
    right: 0;
    bottom: 0;
    background: transparent url('/images/new.png') no-repeat;
}

There's a bit of an issue with the positioning of the overlay image as the <a> is made an inline block for positioning to work, but you can always give it a little bottom offset to make up for it. Here's a fiddle to show you what I mean.

Upvotes: 2

Related Questions