Does anyone know how to create an image container like this using CSS and HTML?

Question

Image

Hi guys , I would like to contain images like the image above. I am quite sure that I should include the image inside a div container, but I have no idea on how to style the container and image. Other than that, the border has a different color when it's overlapped. Any kind of help is greatly appreciated. Thank you and sorry for my bad English.

Basically this is the code that I have written, but I don't think that it is the correct way :

 .container { position: relative; width: 100%; height: 100%; max-height: 350px; max-width: 800px; border: 1px solid gray; left: 16px; top: 16px; } .dimg { max-width: 110%; max-height: 110%; position: absolute; left: -16px; top: -16px; } 

 <div class="container"> <img class="dimg" src="http://static.wixstatic.com/media/fc350e_e38e21e547204e4b83ff18afcab7f300.jpg"> <div class="caption"> </div> </div> 

Answer 1

This should be good starting point:

 .container { position: relative; width: auto; max-height: 350px; max-width: 800px; border: 2px solid gray; display: flex; height:160px; } .img-container { flex:1; position: relative; left: -16px; top: -16px; height: calc(100% + 32px); overflow:hidden; } .caption{ flex:1; } .dimg { max-width: 110%; position: relative; width:100%; } .border2 { border: 2px solid white; height:160px; width:100%; position: absolute; top: 16px; left: 16px; } 

 <div class="container"> <div class="img-container"> <img class="dimg" src="http://static.wixstatic.com/media/fc350e_e38e21e547204e4b83ff18afcab7f300.jpg"> <div class="border2"></div> </div> <div class="caption"> </div> </div>