<div class="wrap">
<span class="dissolve img1"><img src="http://www.pmob.co.uk/temp/images/zimg6.jpg" alt="Sunset" width="300" height="300"></span>
<span class="dissolve img2"><img src="http://www.pmob.co.uk/temp/images/zimg7.jpg" alt="Sunset" width="300" height="300"></span>
<span class="dissolve img3"><img src="http://www.pmob.co.uk/temp/images/zimg3.jpg" alt="Sunset" width="300" height="300"></span>
<span class="dissolve img4"><img src="http://www.pmob.co.uk/temp/images/zimg3.jpg" alt="Sunset" width="300" height="300"></span>
<span class="dissolve img5"><img src="http://www.pmob.co.uk/temp/images/zimg3.jpg" alt="Sunset" width="300" height="300"></span>
</div>

.wrap{text-align:center;font-size:0;}
.dissolve{
	margin:15px;
	display:inline-block;
	position:relative;
	width:30%;
}
.dissolve img {
	width: 100%;
	height:auto;
	opacity:1;
	display:block;
}
.dissolve img, .dissolve:after {
	margin:0;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
	z-index:2;
}
.dissolve:after {
	content:" ";
	background:url(http://www.pmob.co.uk/temp/images/zimg5.jpg) no-repeat 0 0;
	background-size:cover;
	z-index:-1;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	opacity:0;
	filter: alpha(opacity=0);
}

/* other transitions */
.img2:after{background:url(http://www.pmob.co.uk/temp/images/zimg4.jpg) no-repeat 0 -300px;background-size:cover;}
.img3:after{background:url(http://www.pmob.co.uk/temp/images/zimg2.jpg) no-repeat -300px 0;background-size:cover;}
.img4:after{background:url(http://www.pmob.co.uk/temp/images/zimg1.jpg) no-repeat 0 300px;background-size:cover;}
.img5:after{background:url(http://www.pmob.co.uk/temp/images/zimg5.jpg) no-repeat 300px 0;background-size:cover;}


/*  */
.dissolve:hover:after { opacity: 1;filter: alpha(opacity=100); z-index:3;background-position:0 0;	}
.dissolve:hover img { opacity:0;filter: alpha(opacity=0); }