html, body
{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #000;
  font-family: monospace;
}

.grid, .image, .border
{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.border
{
  border: 40px solid #000;
  padding: 20px;
  color: #000;
  font-size: 24px;
  text-shadow:
    1px 0 0 #FFF,
    -1px 0 #FFF,
    0 1px 0 #FFF,
    0 -1px 0 #FFF,
    1px 1px 0 #FFF,
    -1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
    1px -1px 0 #FFF;
}

.image
{
  background: #000 url(http://upload.wikimedia.org/wikipedia/commons/2/2f/G%C3%BCnz6.jpg) center no-repeat;
}

.grid
{
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAZBAMAAAAYgrnCAAAAA3NCSVQICAjb4U/gAAAAGFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAABcYkG9AAAACHRSTlMA/0TdEXeZZn00UBIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAGHRFWHRDcmVhdGlvbiBUaW1lADI4LjAzLjIwMTMBvZfUAAAAXElEQVQImWMQBAMBBnVDICWmwMDAJigoDKQYGAwFRUAUQ6FgAJhWFFRAoWHiUHVQfTBzYOYiaFOlYBAt5sDAkgikTYB6nIE0yBBWIA0ylAmJhonD1MH0wcxBNR8AMXgNrx3BetEAAAAASUVORK5CYII=);
  -webkit-transition
}

.container .image
{
  -webkit-filter: blur(5px);
  -webkit-transition: -webkit-filter linear 1s;
}

.container .grid
{
  -webkit-filter: blur(0px);
  -webkit-transition: -webkit-filter linear 1s;
}

.container.focus .image
{
  -webkit-filter: blur(0px);
}

.container.focus .grid
{
  -webkit-filter: blur(5px);
}