Question

What would be the best method of going about doing this? I want to essentially apply a photoshop-esque color overlay of image ads on a website. Preferably through CSS, but javascript would work too. My first idea was placing a div with the color I intend with the same width and height as the ad div, and applying an opacity setting to it so that it blends together. Thoughts?

Answer 1

First of all, I dont think your advertisers would be happy at you changing the color scheme of their ads (think about brand colors etc), but it should be doable nevertheless.

Using a overlay with a background color and a opacity might not give the most pleasing result, but it’s a step toward what you’re trying to achieve. The only problem is that the overlay will make the link unclickable, so it has to be done so that the image for the ad is at the bottom, and the overlay is actually the link. For example, this might work:

<div class="ad-container">
    <img src="ad_image.jpg" />
    <a href="www.ad.com">Real ad link</a>
</div>

And in CSS:

.ad-container {
    position: relative;
}

.ad-container a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f00;
    opacity: 0.5;
    filter: alpha(opacity=50); /* for IE */
    text-indent: -9999px; /* Hide text */
}