<div class="w grid">//中间主体部分
			<div class="ad-l">
				<a href="#"><img src="img/ad-l.png" /></a>
				<a href="#">
					<img src="img/ad-r.jpg" class="ad-r"/>
				</a>
			</div>
</div>

css部分

.ad-l {
	position: absolute;//绝对定位，调整ad-l位置,gird是相对定位
	top: 10px;
	left: -250px;
	height: 470px;
	width: 250px;
}
.ad-r {
	position: absolute;//绝对定位，调整ad-l位置,gird是相对定位
	top: 0;
	left: 250px;
	height: 470px;
	width: 0;//隐藏ad-r
	z-index: 999;提高权重
	transition: all 0.8s;设置css3动画
}
.ad-l:hover .ad-r{
	width: 790px;设置点击后展开大小
}

效果如图