tomcritchlow tomcritchlow - 6 months ago 22
CSS Question

How to add offset border to image of unknown size?

I'm trying to design this effect:

enter image description here

How do I make this work using css? The image size is unkown and I want the green box to be the same size as the image but offset?

I can't get any solution to work except sizing the green box using javascript but I think there must be a css solution?

thanks!

Answer

You can use pseudo-class to do this :

.imgContainer{
  position:relative;
  display:inline-block;
}
.imgContainer:before{
  content:'';
  border:1px solid green;
  position:absolute;
  width:100%;
  height:100%;
  top:10%;
  left:10%;
  z-index:-1;
}
<div class="imgContainer">
  <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia18351-1041.jpg?itok=TyivXWrM">
</div>

Comments