Semi-transparent image border

StackOverflow https://stackoverflow.com/questions/642130

  •  22-07-2019
  •  | 
  •  

Question

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'>
<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>
Was it helpful?

Solution

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.

OTHER TIPS

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.

this was js & css solution, but worth mentioning

GlassBox-JS

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top