Как реализовать плавное проявление картинки css?

Всем привет!
Есть такая задумка:
Что бы на экране при переходе на сайт, сначала был белый экран, а потом плавно проявлялась картинка.
Ни как не получается структура html :

<div class="1">
			<div class="2"></div>

CSS:

.1 {
	position: fixed;
	left: 0;
	top: 0 ;
	width: 100%;
	height: 100%;
	background: #f6f3f3;
	z-index: 2;
	background: url(http://wp.widewallpapers.ru/2k/cities/new-york/1920x1080/New-York-1920x1080-056.jpg) center no-repeat;
		transition: 2s;
	
}

Что нужно, что бы из центра появлялась картинка средствами css?
Спасибо.