asked on

CSS Image Mask - Overlay

Hello,

I have an image that is 120 x 190 and I want to lay a transparent png with rounded corners on top of it, it is the same size.

Can I do this safely so that it is cross browser, or if it just removes the top image that is okay also.

Thanks!
Matt

remorina

Hi Matt,
You can do so, this would work seamlessly among different browsers if the transparent GIF/PNG has rounded corners with the background colour that matches the background behind the image.

For example a black background and a square image, then place a transparent GIF/PNG with a black corners with no "SemiTransparency", that scenario would work perfectly and it's actually applied on one of the sites we built http://www.egfinder.com/

In this site the thumbnails uploaded are normal images and a rounded corners & border is placed on top of it, you can find the image placed on top of the thumbnails here http://www.egfinder.com/images/item_border.png

This Should work well with any browser including IE6, but if you intend to use semitransparency that would be a different story and approach, you can still use the above method but it will only work with recent browsers that support PNG transparency

Cheers

movieprodw

ASKER

Great, how :-)

Is it a php code or css?

remorina

CSS, no php required
Will try to create a simple example and attach it for you tonight

remorina

Hi movieprodw,
I've created an example for you below using some already existing image on the site mentioned above.

The trick is to set the parent div to position:relative, the create 2 classes, one for the image and one for the round corners image, set the z-index of the round corners image to a higher value than the image.

Try the below example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
<head> 
<title> Round Corner Example </title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

<style type="text/css">
#wrapper {width:300px;height:300px;background:#150000;margin:0 auto;padding:20px;}
.image_container {position:relative;}
.image_container img.image {position:absolute;z-index:1;}
.image_container img.border {position:absolute;z-index:10;}
</style>
</head> 
<body> 
<div id="wrapper">
    <div class="image_container">
        <img class="image" src="http://www.egfinder.com/gallery/images/AGVRossi_DSC00675.jpg_thumb.jpg" width="107" height="107" alt="" />
        <img class="border" src="http://www.egfinder.com/images/item_border.png" width="107" height="107" alt="" />
        
    </div>
</div>
</body> 
</html>

Open in new window

ASKER CERTIFIED SOLUTION

remorina

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial