CODEWITHSUNDEEP
css
black_belt
black_belt

Reputation: 6799

Transparent border over image

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:

enter image description here

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;
}

Upvotes: 17

Views: 24176

Answers (5)

Moritz Friedrich
Moritz Friedrich

Reputation: 1471

For anyone still googling for this: It is possible to achieve this effect with CSS only by using the outline property:

img {
  outline: 15px solid rgba(255, 0, 0, .75);
  outline-offset: -15px;
}
<img src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-0F79C42300000578-201_634x429.jpg" width=250 />

Upvotes: 7

Donovan Charpin
Donovan Charpin

Reputation: 3397

If you want a border with opacity, you can use RGBA code. The 'A' signify alpha, so you can modify opacity.

border: 5px solid rgba(255,0,0, 0.3) ;

You can use z-index to put your box with border above your image if you put image and box in position absolute, relative.

Upvotes: 2

andi
andi

Reputation: 6522

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/

Upvotes: 24

Crackertastic
Crackertastic

Reputation: 4913

I updated your fiddle. http://jsfiddle.net/6GK45/21/

What you need to do is set the image as the background of the parent div and then adjust the width/height of the child div to hug the image accordingly.

//make js fiddle work

Upvotes: 0

C3roe
C3roe

Reputation: 96226

As Donovan said, rgba for the border-color – but the border on an element containing the image, and then the image “pulled” outwards under the border using a negative margin and z-index – like this, http://jsfiddle.net/6GK45/7/

<div class="box" >  
    <span class="lightbox"><img …></span>
…
</div>

.lightbox{
   display:block;
   width:267px;
   border:5px solid rgba(255,255,255,.75);
}
.lightbox img{
    display:block;
    width:277px;
    margin:-5px;
    position:relative;
    z-index:-1;
}

Upvotes: 4

Related Questions