CODEWITHSUNDEEP
htmlcsstransparency
Lorenzo
Lorenzo

Reputation: 4648

Semi-transparent image border

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>

Upvotes: 0

Views: 7239

Answers (3)

Dels
Dels

Reputation: 2425

this was js & css solution, but worth mentioning

GlassBox-JS

Upvotes: 1

Rahul
Rahul

Reputation: 12231

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.

Upvotes: 2

Daniel Rikowski
Daniel Rikowski

Reputation: 72504

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.

Upvotes: 1

Related Questions