マウスオーバーで背景画像をズームアップする方法を紹介します。

背景画像の拡大・縮小を実現する方法はいくつかありますが、ここではtransformのmatrix3dを使うタイプを紹介します。
※transformのscaleを使うタイプやbackground-sizeを使うタイプがありますが、この2つは background-size: cover と併用して使うとうまくいきません。

demo

HTMLとCSSは次のようになります。

HTML

<div class="box-main-photo">
	<div class="background-image"></div>
</div>

次にCSSです。widthやheightなどは好きなように変更してください。

CSS

.box-main-photo {
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
}
.background-image{
	position: absolute;
	width: 100%;
	height: 500px;
	background: url("http://rfs.jp/wp-content/themes/smart/i/photo/P6JB59WSR2.jpg") 
		#f0f1f6 no-repeat center center;
	background-size: cover;
	transition: all 0.5s ease-out;
	transform: matrix3d(
		1, 0, 0, 0,
		0, 1, 0, 0,
		0, 0, 1, 0,
		0, 0, 0, 1
	);
	will-change: transform;
}
.background-image:hover {
	transform: matrix3d(
		1, 0, 0, 0,
		0, 1, 0, 0,
		0, 0, 1, 0,
		0, 0, 0, 0.9
	);
}

おまけでグレースケールと透過をあわせて使ってみましょう。
HTMLはheader要素を追加しています。

<div class="box-main-photo">
	<header class="entry-header">
		title
	</header>
	<div class="background-image"></div>
</div>

CSSは下記を追加します。.entry-headerのdisplay以降は画像の上に文字などを表示させたい際に調整ください。

.entry-header {
	position: absolute;
	pointer-events: none;
	width: 100%;
	height: 500px;

	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20pt;
	color: #fff;
	z-index:1;
}

demo