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
LVL 1
movieprodwAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
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
0
movieprodwAuthor Commented:
Great, how :-)

Is it a php code or css?
0
remorinaCommented:
CSS, no php required
Will try to create a simple example and attach it for you tonight
0
remorinaCommented:
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

0
remorinaCommented:
Same example with a brighter image to show the corners better
<!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/spider_1.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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.