画像にマウスホバーすると枠を残してスライド移動する、みたいなエフェクト

Result

マウスホバーで画像がスライド移動する際、枠が残るように見えるエフェクトを実装するCSSです

css

.image-border {/*一番下の部分の画像*/
  width: 300px;
  height: 300px;
  background-color: #eee;
  background-image: url("https://unsplash.it/300?image=885");
  position: relative;
  z-index: 1;
}
.image-border:after {/*画像の下に背景が白い要素を残す事で切り抜かれたように見える*/
  content: '';
  position: absolute;
  width: 290px;
  height: 290px;
  left: 5px;
  top: 5px;
  background-color: #fff;
}
.image-border .main-image {/*移動用のレイヤーを重ねて背景に同じ画像を設定*/
  position: absolute;
  width: 290px;
  height: 290px;
  left: 5px;
  top: 5px;
  background-image: url("https://unsplash.it/300?image=885");
  background-size: 300px 300px;
  background-position: center center;
  z-index: 2;
  transition: .2s ease-in-out;
}
.image-border:hover > .main-image {/*ホバーで移動させる*/
  transform: translate(-50px, -50px);
  transition: .2s ease-in-out;
}

/*以下、テキスト部分の設定*/
.image-border:hover > p.title:after {
  transform: scale3d(1, 1, 1);
  transition: .2s ease-in-out;
}
.image-border p.title {
  height: 60px;
  padding: 0;
  position: absolute;
  bottom: -80px;
  font-weight: 400;
  line-height: 60px;
  color: #2c3e50;
  font-size: 1em;
  margin-left: 150px;
  transform: translateX(-50%);
}
.image-border p.title:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #e74c3c;
  bottom: 10px;
  left: 0;
  transform: scale3d(0, 1, 1);
  transition: .2s ease-in-out;
}

.text{
	position:absolute;
	bottom:0;
	right:10%;
	z-index:2;
}

html

<div class="image-border"><p class="text">(・▽・)ｲｲ!</p>
	<div class="main-image"></div>
	<p class="title">foo bar</p>
</div>

via

Image hover animation