JSFiddle - React, Tailwind, and code Playground

Image Border Effect

by CBroe

HTML

<h1>Image Border Effect</h1>
<div>
<img src="http://cdn3.spiegel.de/images/image-955786-breitwandaufmacher-vttq-955786.jpg">
</div>

CSS

body { padding:2vmax; color:#fff; color:rgba(255,255,255,.9); text-shadow:1px 1px rgba(0,0,0,.9); font-size:3vmax; }
div { position: relative; margin:1vmax; padding:3px; }
body, div { background: url(http://cdn3.spiegel.de/images/image-961766-breitwandaufmacher-jcee-961766.jpg) fixed; background-size:cover; }
img { display:block; width:100%; }
div:after { content:""; position:absolute; top:-1vmax; left:-1vmax; right:-1vmax; bottom:-1vmax; z-index:-1; background: url(http://cdn3.spiegel.de/images/image-955786-breitwandaufmacher-vttq-955786.jpg); background-size:cover; opacity:.6; }