Transparent border on top of image

HTML & CSS
1

i want to make an effect where the edges of an image are faded out, but would rather not do it to the actual image. What I have in mind is the effect of if a border was a white png at 50% transparency overlayed on top of the image so its edges were faded.
Is there any way to do this in CSS?
I could make a separate div that’s the same size and position it on top of the image and give it the border i suppose, but I’m not sure how to position that with images that are created dynamically from a database and therefore in unpredictable places.
maybe i’d need javascript…

2

if all you want is a 50% TINT ( as opposed to a gradient fade) you could do the following:

  1. CSS3:

    .main{background:url(37884_1531943497084_1189662405_31506190_1705204_n.jpg) no-repeat red -10px -10px; height:468px; width:700px; position:relative;margin:10px; }
    .fade{background:url(37884_1531943497084_1189662405_31506190_1705204_n.jpg) no-repeat red ; position: absolute; top:-10px; bottom:-10px; left:-10px; right:-10px; opacity:.5;}

<div class=“main”><div class=“fade”></div></div>

OR

.wrap {position:relative; float: left;}/display:inline-block instead of float:… will also work/
.wrap img{ vertical-align:bottom;}
.wrap span{border:10px solid rgba(255, 255, 255,.5); position: absolute; top:0; left:0; right:0; bottom:0; display:block;}

<div class=“wrap”><img src=“37884_1531943497084_1189662405_31506190_1705204_n.jpg”><span></span></div>

or you could simply use 4 AP spans after the image, and use your transparent PNG. which would support CSS2.1

.wrap {position:relative; float: left;}/display:inline-block instead of float:… will also work/
.wrap img{ vertical-align:bottom;}
.wrap span{background:url(transparent.png); position: absolute; }
.left, .right{ width:10xp; top:10px; bottom:10px;}
.top, .bottom{ height:10xp; left:0; right:0;}
.left{left:0}
.right{right:0}
.top{top:0}
.bottom{bottom:0}
<div class=“wrp”><img src=“image.jpg”><span class=“top”></span><span class=“bottom”></span><span class=“left”></span><span class=“right”></span></div>

3

thanks a lot for that! it does bloat up the html a bit, but does exactly what I have in mind. I need to enhance my uses of positioning a little.