Transparent border over image

Question

I am trying to create a transparent border for my image and place it over the image using CSS.

For example please see the image below:

To achieve this I tried the following code but I am facing the following problems:

1. The border is not over the image; its around the image and not allowing the image to fit 100% inside the parent div

2. To Make the border transparent I used "opacity" but its making the image transparent too which I don't want.

You can check the code live here: http://jsfiddle.net/6GK45/

I could create a div and made the border color transparent and then place it over the image but the problem is the width of my image is fixed (277px) but the height is not. So this will not work for me.

Could you please tell me how to create the transparent image border and place it over the image just like in the image above.?

HTML:

<div class="box" >  
   <img class="lightbox" src="myimage.jpg" />
   This is text
</div>

CSS

.box {
    width:277px; 
    background:#FCFBDF;    
}

.lightbox {
    border: 5px solid red;
    z-index:999; 
    opacity:0.3; 
}

img {
    width:277px;
}

Answer 1

How's this - it uses :after to create a pseudo-element which places the border on top of the image, not outside it. http://jsfiddle.net/6GK45/8/

.imgWrap:after{
    content:"";
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    opacity:0.5;
    border:5px solid red;
}

UPDATE: If it's important to preserve the ability to right-click on the image, you can do it like this with an additional wrapper: http://jsfiddle.net/6GK45/24/