图片与文字悬浮立体效果怎么做

图片与文字组合的立体效果css怎么实现

如上图所示的效果

html代码

<h1>Amber Heard</h1>
<img src="https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg" />
<div class="glow-wrap"></div>

<a id="author" href="http://tiagoalexandrelopes.com/" target="_blank" rel="noopener">About me</a>

CSS代码

.snip1325 {
position: relative;
overflow: hidden;
margin: 10px;
min-width: 255px;
max-width: 315px;
height: 220px;
width: 100%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.snip1325 img {
height: 100%;
position: absolute;
right: 0;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}
.snip1325:hover img,
.snip1325.hover img {
-webkit-transform: translateX(130px);
transform: translateX(130px);
}
/* Demo purposes only */
body {
background-color: #212121;
}