views:

1004

answers:

3

I'd like the image to bleed into the container div.imgborder and i'd like the bleeding to be semitransparent (like an opaque glass effect). Is there a way to achieve this via CSS or maybe setting an image background with some opacity on the div.imgborder?

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
        'http://www.w3.org/TR/html4/strict.dtd'&gt;
<html>
<head>
<title></title>

<meta name='keyword' content=''>
<meta name='description' content=''>

<link rel='stylesheet' href='reset.css'>

<style type='text/css'>
    body {
      background-color: #ccc; 
    }

    div#container {
      width: 960px;
      margin-left: auto; 
      margin-right: auto;
      margin-top: 50px;
    }

    img#myimg {
      overflow: visible;
    }

    div.imgborder {
      background-color: #222;
      opacity: 0.9;
      width: 160px;
      height: 160px;
      padding: 10px;
    }


</style>

</head>
<body>
    <div id='container'>

     <div class='imgborder' align='center'>
      <img src='bar.jpg' alt='' width='160' height='160' id='myimg' />
     </div>

    </div>
</body>
</html>
+1  A: 

You can create a PNG file with the semi-transparent effect you like and add this as background. Any modern browser will this render correctly and create the effect you want.

DR
Sounds cool! I like this solution
L. De Leo
A: 

Gecko and WebKit support setting rgba() as a border-color property, so you could potentially set:

border-color: rgba(255,255,255,0.42);

..and have a border that is semi-transparent.

To accomplish the bleeding, however, you'll probably need to overlay a transparent div on the image and give it a width and height equal to the width and height of the image minus the width of the border. So if the image is 200x200, and you want a 2px border, you'll probably have to make the div 196x196 since the box model dictates that the border width is added to the width/height dimensions.

Rahul
+1  A: 

this was js & css solution, but worth mentioning

GlassBox-JS

Dels