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 theme elgg with HTML and CSS only? [closed]

    How to move some text down in a li tag?

    how can i use css selector to give style only to a first div between two divs of the same kind?

    How can I stop my cursor changing to a vertical arrow over text?

    how to blur the background image only in css

    ASP.NET - IIS 7 - DotNetNuke - How do I force browsers to reload the site's CSS?

    How i can put a picture above a border in css?

    How can I position a child element behind its parent in IE7 and earlier

    How to prevent crawlers depending on XPath from getting pages contents [duplicate]

    How can I add a pulse animation to a div in an array of divs, in Javascript?

    How to change Label color in flex Using CSS?

    How to keep pure-HTML-&-CSS collapsible panels open when another one is opened?

    How to reference css in actionlink?

    How can I get a very “blurred” box-shadow out of only the bottom of the box?

    How to rotate text and position it properly? (CSS, HTML)

    How do I avoid gap when using z-index in CSS?

    Android - How do I create an email body from a file that contains css and html?

    In Python, I can print HTML to the browser, how can I ensure that the CSS that relates to it also get “printed”

    Showing a large amount of HTML alternative content with swfobject & swffit flash site

    How to prevent css hover effects executing before you reach the element with your mouse?

    How to remove string that dosn't have an html tag using CSS

    How to create a pixel perfect divider using css border [closed]

    How to have div fill width and height of browser window and not have the image be streched

    how do i set the text that my json file is printing to screen i want to hide the text

    How can I add a consistent left margin to a checkbox label?

    how to stop css/jquery rotation

    How To Place Buttons Around A Circle with HTML5 and CSS 3?

    How to hide autofill safari icon in input field

    How to set image as a button in HTML & CSS?

    How to find which CSS files are used for current page