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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
remorinaConnect With a Mentor Commented:
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
 
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
All Courses

From novice to tech pro — start learning today.