enter image description here

I want to do so. It is clear that to bring to the forefront, you need to add z-index . But how to make a border similar to the image?

  • Need to add such a border to the picture? - Yuri
  • Ideally, yes, right. You can simply fixed, the size of the picture is not important. - Timur Musharapov

4 answers 4

Deciding through the border and using the div :

 .image { position: relative; width: 150px; height: 150px; background-image: url("https://graph.facebook.com/625308780945294/picture?type=large"); } .image:before { content: ""; position: absolute; border: 2px solid #c745bc; left: 20%; top: 20%; width: 100%; height: 100%; z-index: -1; } 
 <div class="image"> </div>

  • As a result, made, starting from this. Only part of the styles changed to left: 30%; top: -5%; width: 75%; height: 95%; left: 30%; top: -5%; width: 75%; height: 95%; - Timur Musharapov
  • one
    @TimurMusharapov No problem, this is just an example and absolutely every number is at your discretion. Unless z-index should be negative. - Vadim Ovchinnikov
  • @VadimOvchinnikov, could you add me as a friend in one of the social. networks listed in my profile? I would be interested to talk with you on different topics about the development of sites. And then there is absolutely no one to talk to - Yuri

You can do it with the help of a shadow, but this method will work, if only against the background of a solid color:

 img { width: 150px; height: 150px; box-shadow: 16px 16px 0px #fff, 18px 18px 0px #c745bc, 18px 14px 0px #c745bc, 14px 18px 0px #c745bc; } 
 <img src="https://graph.facebook.com/625308780945294/picture?type=large">

  • Oh, great, the example is clear! Thank. - Timur Musharapov
  • A wonderful, concise answer, does not require an additional block and works with the img tag. Only if box-shadow could be more gracefully expressed, it would be ideal. And another question: what if the background is not a solid color? What is it 16px 16px 0px #fff change? - Vadim Ovchinnikov
  • @VadimOvchinnikov, if not a solid color, then the problem) Then we should have additional tags - Yuri
  • @Yuri Yes, just put this restriction in the answer (unless of course you find it difficult). And if you do not take it into account, the answer is very original. - Vadim Ovchinnikov
  • one
    @VadimOvchinnikov, added. Your way is excellent, just a pity that there is a bit too much code in the end) - Yuri

transform: translate ():

 div { position: relative; padding: 10px; display: inline-block; margin: 20px; background: #eee; } div:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid red; transform: translate(15px, -15px); z-index: -1; } 
 <div><img src="http://put-k-uspehy.ru/wp-content/uploads/2011/12/elka_na_sayt.gif" alt=""></div>

    as an option - place the image in a div, set the border of the div and displace the img relative to the div via position or transform

    https://jsfiddle.net/1fve7q00/

     div { width: 100px; height: 100px; border: 2px solid black; position: relative; } img { width: 100px; height: 100px; position: absolute; left: -10px; top: 10px; } 
     <div> <img src="http://lomets.com/wp-content/uploads/2016/04/Stephanie-Beck-3.png" alt=""> </div>