How to add offset border to image of unknown size?


Tags: css,image,border

Problem :

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!



Solution :

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>


    CSS Howto..

    How to show overflowing text with animation?(Javascript - HTML - CSS)

    How can I replicate the StackOverflow questions list format?

    How can we cache inline SVG in Browsers?

    How can I make a CSS Wrapper adjust height automatically?

    How to use printer friendly function with CTRL+p?

    How can I target CSS to a particular sharepoint Page Layout file?

    How to click CSS with a space using Selenium Webdriver

    How to edit the css style of validation ng-class error

    How do you contain and position an input with a div?

    how to div.width css property using js or jquery?

    How do I select certain siblings via CSS?

    How to create rounded shapes with css or SVG

    How to make an oblique oval in CSS?

    CSS how to hide resize divs while keeping it centerd

    How to create a rounded rectangle shape Css?

    How to use not css selector with * in stylesheet

    how to use dialogClass option in jquery dialog with an external CSS file

    CSS - How do I get my list element to fill 100% of the block

    How does a browser determine which cursor to use if multiple are set via CSS?

    how to make div background image responsive

    I have the CSS & JS, how do I convert that to erb for my Rails app?

    How to show div of google maps after hidding it

    How to get the current year using css?

    HTML/CSS/JS: How to force browser to save password from a non-'password' type input?

    css how to depend one div to another one in auto adjusting width

    How can I compress / gzip my mimified .js and .css files before publishing to AWS S3?

    CSS/HTML : how to make something become absolute positioned once you scroll by it

    Position:Absolute; Div is making the page too wide and adding blank space to the side. How do I reduce its size?

    Using bootstrap, how do you get columns to clear properly?

    CSS: How to achieve - Two elements to be centered and positioned side by side WITHOUT a third parent container?